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

Design Help?

  • # December 15, 2011 at 1:40 am

    I’m looking to make a website that has the header and footer background/background images stretched to the whole page, but the text aligned to one central div. I’ve illustrated my point below.
    Excuse my rushed visual, and terrible color scheme. The text should be in the brighter area, but I don’t actually want the div whiter in the final project. Same with the footer. All the settings are changeable as if it’s in the wrap (which it should be) but the whole background image should stretch 100% of the browser window.

    Thanks for your guys’ help. :-)

    # December 15, 2011 at 2:09 am

    It looks like you could achieve it by just using 3 individual wrappers to separate the sections (top, content, footer), and then just use an image to repeat horizontally. It gets a little div heavy but does the job nicely.

    # December 15, 2011 at 2:31 am

    I see. And then I’d just adjust the height in both rather than just one. Well thanks! That helped a lot I guess. Not what I was expecting, but good.

    # December 15, 2011 at 11:08 am

    Well, you’d have a fluid height on the middle one. Something kinda like this.

    stuff here


    There’s probably better ways of doing it, but this is how I’ve done it in the past when I needed something specific like that. I suppose you could also use a stickyfooter technique as well and get a result that’s close.

    # December 16, 2011 at 4:15 pm

    Thank you, it worked perfectly!

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

You must be logged in to reply to this topic.