You may have come across the problem that you wanted to have two different backgrounds on your website. For example, you have one background-image that is centered (a big graphic that has “repeat:no-repeat”) and another image that is a gradient or a pattern that repeats itself (“repeat:repeat-x”) horizontally. In order to use two background-
images on your entire website you don’t need a DIV that has “height:100%;
width:100%;margin:0px auto;” and so on. There’s a simple standard possibility that allows you to do exactly this.
For using two backgrounds we need to make use of two standard CSS-properties. As you know you can define a background-image for your entire website using the BODY-property. This could look like this:
That’s it. Now you have two background-images on your website without using a single DIV. This method also has the advantage that you don’t have to debug your elements because “HTML” and “BODY” are working well (for example, if you’re using a DIV with “width:100%;height:100%;”, you’ll have the problem that the DIV is “cutted” when you resize your browser-window so you have to define a second DIV with a static width or height in order to fix this problem).
In CSS3, there will be the possibility of defining multiple backgrounds so that you can do even more with one DIV.