large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

How to Use CSS to Style 2 Background Images

Recently ran across a web design situation where I needed 2 background images, 1 layered on top of the other. 

After much looking came across this solution  – use CSS to style both the html and body divides with separate background images.

In my case I wanted a tiled background image with an image overlay  so I styled the html like this:

html { background:url(images/bg1.png) repeat; }

Wanted the other background image to appear on top of the tiled background, so I did this:

body { background:url(images/bg2.png) no-repeat top center transparent; }

Did the trick for me – give it a try the next time you have an occasion to.

Once CSS3 comes along this will be easy all you will need to do is separate each image with a comma in the body:

body { background:url(images/topbg.jpg) no-repeat, url(images/middlebg.jpg) no-repeat, url(images/bottombg.jpg) repeat }