[resolved] How to set background image full width size on Twentyeleven Child theme (4 posts)

  1. kubegusa
    Posted 2 years ago #


    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.

    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/

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  3. kubegusa
    Posted 2 years ago #

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

  4. lbmotorcars
    Posted 1 year ago #

    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!!

Topic Closed

This topic has been closed to new replies.

About this Topic