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!

    Thanks

    Joe

    Rob
    # 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 {

    height:100%;
    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!

    ???

    Thanks

    Joe

    # February 28, 2010 at 6:58 pm

    Here is how I did it. Ignore all the JS. http://www.edit-your-website.com/

    # February 28, 2010 at 7:03 pm

    Eric,

    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:
    Eric,

    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

    Eric,

    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

    Joe

    # 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.

*May or may not contain any actual "CSS" or "Tricks".