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

100% width bands of colour

  • # February 28, 2010 at 6:32 pm

    Dear all,

    I am getting a little frustrated with a layout that i just cant seem to make work, i am sure its really simple!

    I would like to design a page that has a centre container that is 960px width. The header and footer will be a non-white colour while the main body will be white. I want the header and footer colour (most likely a repeating background) to extend to the edges of the browser for those visitors with large screen displays. I also want the footer to be attached to the bottom of the page.

    I would much appreciate some help from the wider css community who can help a brother in need!



    # February 28, 2010 at 6:48 pm

    mock up your the BG image you want – then take a 1px (or if its a texture 30-50px how ever much it is to see the texture properly) vertical slice right from the top to the bottom.

    Then you can do this:

    html {

    background:url(yourslicedimage.jpg) repeat-x;


    This will add the bg to your HTML tag and therefore your whole page BG, the repeat-x makes it repeat across the page (on the X axis)

    # February 28, 2010 at 6:55 pm

    Rob thanks for your reply,

    However, the page height will be dynamic as will the footer height. So i need to have 2 sections (header and footer) independant of each other but both reaching 100% browser width bg image. but then having a 960px width div which is centre stage as a content container for both footer, header and content

    i hope i explained that ok!




    # February 28, 2010 at 6:58 pm

    Here is how I did it. Ignore all the JS.

    # February 28, 2010 at 7:03 pm


    Anyone can setup a cms, if that business is a winner then there are a few fools in the world!


    # February 28, 2010 at 7:11 pm
    "joe.mulberry" wrote:

    Anyone can setup a cms, if that business is a winner then there are a few fools in the world!


    why are you talking about the cms? I handed you the solution to your problem. All I want to here from you is "thank you". As you’ve discovered, that took me a while to figure out. Any fool can reverse engineer that code. Or can you?

    # February 28, 2010 at 7:21 pm


    My sincere apologises! In my frustration to nail this layout, I presumed you were sending a spam answer. Just realised you were kindly sharing your work! very sorry!

    Just delving into the source code now…..

    Thanks and sorry


    # February 28, 2010 at 8:00 pm

    Apology accepted. Let me know if you hit any snags.

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

You must be logged in to reply to this topic.