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:

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');}

See the Example


If you have used multiple backgrounds before i’d love you to leave a comment and link to an example.

5 thoughts on “CSS3 Multiple Backgrounds

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>