Sometimes having a double-layer image background is required, whether it be to easily change one part of the background or for some other reason… Honestly, I have not figured out why exactly they did it this way but I do like the background a lot and to see that it’s a tiled background… that’s pretty cool. If anyone finds why this is done this way, please let us know.

Double-layer simply means that they applied one background image to the main area of the page and then nested another DIV inside and added another image to make it layer on top of the one below.

In this case, on this Wave-Hosting.co.uk site, the main background image was applied to the BODY element and then a DIV was nested right inside the BODY tag and the second image was applied to it.

First, main image: backgroundCaustics.png
Second image: WaveHeaderBackground.png

Here is the CSS that made it all happen:

body {
	background:url(images/backgroundCaustics.png) repeat-x #203A44;
}

#mainContainer{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	background-image:url(images/WaveHeaderBackground.png);
	background-repeat:repeat-x;
}

Hope this helps someone.  Anyone have anything to add to this?

Until next time,

~ Valik