CSS3 Multiple Backgrounds

I thought it was about time I experimented with some CSS3 multiple backgrounds so I decided to play around with a wallpaper design I worked on in September.

My experiment uses a top left, top right, bottom left and bottom right png gradient on the HTML element, with a repeating png overlay on the BODY.

As I firmly believe that you should make your design look at least acceptable in Internet Explorer 6, I have used Modernizr, a JavaScript library that allows you to take advantage of emerging web technologies.

It’s the first time I have used it and I can see the huge potential of it. This system uses feature detection to add classes to the HTML document, allowing you to progressively enhance your websites.

In this example, I have been using multiplebgs, which allowed me to use the CSS3 technology only on sites that supported it. That allowed me to use a fallback JPG image for browsers that don’t.

Here is the CSS code:

html.multiplebgs{ background-color: #141414;


	background-image: url("top-left.png"), url("top-right.png"),

		url("bottom-left.png"), url("bottom-right.png");
	background-repeat: no-repeat, no-repeat,

		no-repeat, no-repeat;

background-position: top left, top right, bottom left, bottom right; } body{background: url('fallback-bg.jpg') repeat; height:100%; width:100%;} .multiplebgs body{background: url('body-bg.png');}