Support » Fixing WordPress » How to set background image full width size on Twentyeleven Child theme

  • Resolved kubegusa

    (@kubegusa)


    Hi

    I want a full width sized background image to my Twentyeleven child theme. When I just upload it in the background section of the theme options, I still have a white border left and right of the image in wide screens. When making the browser more narrow, the white doesn’t show.
    So I decided to add this to my child style.css

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    html {
    	background: url(images/bg.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }

    I’m noticing that at least, the image covers the full width, but it created another problem as you can see.
    http://www.sparklynx.be/preview/demaeyer/

    Now, the background image only starts below the footer/colophon/branding, and it does not show behind the header, body, page etc.

    What am I missing? It must conflict with another customization I added in the child stylesheet, because this guy got it to work http://css-tricks.com/perfect-full-page-background-image/

Viewing 3 replies - 1 through 3 (of 3 total)
  • That’s because of the background set here:

    body {
        background: none repeat scroll 0 0 #E2E2E2;
    }

    Put the background in the body tag and then remove the padding from the body tag as well.

    You should not have CSS on the html tag — it does not do anything on the page anyway.

    Thank you so much! This fixed my problem. You’ve been so helpful!

    I actually have two questions…..1) When I type my url, how do I make my home page?……and how do place a full screen background picture on this home page?

    Thank you!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to set background image full width size on Twentyeleven Child theme’ is closed to new replies.