How to set background image full width size on Twentyeleven Child theme

  • Resolved kubegusa

    (@kubegusa)


    12 years, 4 months ago

    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.
    https://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 https://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.

    Thread Starter kubegusa

    (@kubegusa)

    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.