What I want to have a textured background that has three different colors. One that repeats across the top, for a header; one that repeats across the middle, for the content; and one the repeats across the bottom, for the footer. My original plan was just to create three DIVs with background images that repeat-x. The problem with that is the images do not extend all the way to the edges of the browser. My second thought was to repeat a textured background in my body, and then layer transparent colors over it, but I don’t have any clue how to do that or if it is even possible.
The repeating background images should extend to the edge of the browser window. Since divs are block level elements, they should expand to 100% of their parent – in this case the body.
I would guess that by default, the body tag has some padding or a margin on it. For example, Firefox gives the body tag 8px of margin by default. I would implement a reset style sheet or simply add the below to the body selector in your css.
Aside from all of that, your solution should work fine.