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. Image
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.
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.
Well, you’d have a fluid height on the middle one. Something kinda like this.
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.