Treehouse: Grow your CSS skills. Land your dream job.

Infinite width repeat x

  • # May 24, 2011 at 3:59 pm


    I’d like a background image to repeat across the whole screen for a few sections of my site. I’d like the content to have a fixed width though. Normally I would have a nice wrapper class around the whole site, like this:

    Header content

    Content... content?!

    Footer content

    But normally the .wrapper would have a width of – say – 960px, which means my background images for the header, content and footer won’t stretch the whole screen. This leads me to the rather messy markup:

    Header content

    Content .. content?!

    Footer content

    now the background images of header, .content and footer will stretch 100% of the whole page. The content of each part can be 960px.

    Now my question:
    Is there any neater way of doing this so I can keep my markup like I wrote first?!

    Thanks guys! Dave.

    # May 24, 2011 at 4:02 pm

    Does your body currently have a background attached to it? If not, put it on there.

    # May 24, 2011 at 4:04 pm

    Hiya, thanks for the reply –

    Yeah, that would be fine if I just wanted to have one background image, but I’d like to have a background image for the header, a different one for the .content, and a different one for the footer! Dynamic sizes etc.

    # May 24, 2011 at 4:55 pm

    Ah yes, sorry – didn’t read it close enough! In that case you’ll have to get a little messy with the code and give a wrapper to each section to create the 100% width.

    # May 25, 2011 at 9:54 am

    You can use background properties of body and html tags to get the backgrounds (top and bottom aligned). Not sure if it is going to work for you.

    # May 27, 2011 at 7:24 am


    I think this is a clasic layout, as seen on many pages. If your content is centered on the page (wrapper) and you just want to extend the header to the left and to the right, just add a giant neagtive margin to both sides and the same amount as a positive padding.

    body {
    overfow-x: hidden;

    header {
    margin: 0 -9999px;
    padding: 0 9999px;

    I’m not sure if this is the “best” way of doing it, but it always did the trick for me.


    # May 27, 2011 at 9:19 am

    Chris has a solution for you on this very site!

    # May 27, 2011 at 4:40 pm

    Yes, I thougt I’ve seen it here but I couldn’t find it. Chris likes to do things with :before and :after nowadays. :) Maybe I should adopt some of his techniques.

    But beware the browser support!

    # November 18, 2011 at 9:15 am
    html 5 tags currently are not supported in all browsers, so you might just want to stick with the classice div id’s (ex:


    If you go with your original markup. Just go with in your CSS and mark it up simply:

    header, footer, #content {background:#(color of choice) or (background image of choice, and just repeat it to your choice repeat-x or repeat-y); width:100%;}

    .wrapper {width:960px;}

    Very simple CSS and you can go with your original html markup. Hope this works out for you.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.