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.jpgI 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!
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.jpgI 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!