• Hi

    I have a twentyeleven child theme here.

    What I want to do:
    have the page background image stretch to the borders of the page, and have the background ‘move’ down with the page content when you scroll down. At the moment, the image is not fully stretched left and right, and when you scroll down the page, the background image stays fixed rather than move down.
    I’ve tried various things to no avail so far.

    This is the code:

    #page {
    background: url(images/pagebg.png) no-repeat center center fixed;
    -webkit-box-shadow:  0px 0px 80px 20px rgba(50, 50, 50, .75);
    -moz-box-shadow:  0px 0px 80px 20px rgba(50, 50, 50, .75);
    box-shadow:  0px 0px 80px 20px rgba(50, 50, 50, .75);
    margin: 6em auto;
    }

    I want to tell the bg image to have 100% width and height – but how do I do that in this one line? background: url(images/pagebg.png) no-repeat center center fixed;

    I mean, how can I know which property is about what, when they are just listed next to each other, comma separated? I hope this question makes sense.

    As for making the image move along with the content when scrolling, I tried changing ‘fixed’ to absolute, relative, static and inherent. But that didn’t work.

    Any pointers to get me started would be much appreciated!
    Thanks!

  • The topic ‘Twenty eleven child: tell page background image what to do’ is closed to new replies.