Page-wide repeatable backgrounds with centered container in css - css

Question

I'm quite new to CSS and I always try to figure things out on my own, but this one has got me stuck for far too long... A little help would be extremely appreciated. :-)
Basically, what I have to do is a page with a centered container that contains 4 different sections that take 100% of the width of the container. Now, the tricky part is: each of these 4 sections have a different textured background that extends beyond the centered container and take 100% width of the page.
Here's the basic wireframe:
http://i.imgur.com/Qlwjb.jpg
I thought of a few says to do this:
• 1 : Instead of having a main container, just make 4 divs that take 100% width of the page, apply their textured background and then make another 4 divs with a .class that would give them a width and center them. That would solve the issue, but the thing is that I must avoid making additional divs when possible. (I'm a student, you see, and the fewer divs I have, the better for my grades. :-/ )
• 2 : Apply a vertical background-image that would contain all 4 textures to the body and make sure it only repeats itself on the X axis. That's probably the easiest yet dirtiest way to do it: while the 4 sections should have fixed heights, if I ever need to add something to one of them, things would get ugly and I'd have to make another vertical bg-image that fits.
• 3 : Probably the "cleanest" way to do it: apply multiple backgrounds to the body and make them start at different distances from the top so that they don't overlap. But that's where my CSS skills come short: I'm not quite sure how to do that. Also, as I am a student, I've got to try to keep things simple while using "advanced" techniques in order to get better grades. Which means: if I choose to apply multiple backgrounds to the body, I should probably try to use a sprite that contains all 4 backgrounds:
http://i.imgur.com/Awr4L.jpg
...Which would again make things a whole lot trickier to me. I just don't know if it's possible to apply a repeatable background-image and only display a given part of it if the element it's applied to (in this case, the body) doesn't have a defined size. Is there a way to "crop" a bg-image and repeat it without giving a size to the element it's applied to?
Thanks in advance for your help!

Answer 1

I think solution 1 is the way to go. I wouldn't stress too much about having the extra divs - if the design requires each section have its own textured background that spans the width of the page while the content is centered then the extra divs are necessary.
The other options involve too much trial and error (can you ensure the height of the content on one section is not going to extend past the point where the next background has been "magically" positioned?).
I've had to do a similar thing in the past. Here's how:
Create the 4 divs stacked on top of each other spaning 100% width (the default behaviour of a div)
Give each one it's own css class and assign the background image to that class.
For the centered content, create a reusable class (.container) that has the global styling to be applied within each div (width: 960px; margin: 0 auto;)
So your markup will look something like -
<div class="div1">
<div class="container">Content for div 1</div>
</div>
<div class="div2">
<div class="container">Content for div 2</div>
</div>
<div class="div3">
<div class="container">Content for div 3</div>
</div>
<div class="div4">
<div class="container">Content for div 4</div>
</div>
Your css will be something like -
.div1 {
background: url(../img/bgs/div1-bg.jpg) 0 0 repeat;
}
.div2 {
background: url(../img/bgs/div2-bg.jpg) 0 0 repeat;
}
.div3 {
background: url(../img/bgs/div3-bg.jpg) 0 0 repeat;
}
.div4 {
background: url(../img/bgs/div4-bg.jpg) 0 0 repeat;
}
.container {
width: 960px; //based on 960 grid
margin:0 auto; // used to center the container based on it's width
}
Use whatever background positioning and repeat rules you need for your design but that's the general idea.
The goal with css is to try identify the common design patterns and uses classes to try reuse those patterns as much as possible (like the container class above) - rather than doing individual styles for each element.
I highly recommend you read Jonathon Snooks Smacss and this blog by Harry Roberts
Hope that helps :-)