Paul Randall » ie6 https://paulrandall.com Experimenting for a living. Sat, 15 Mar 2025 15:32:49 +0000 en-US hourly 1 https://wordpress.org/?v=4.1.41 CSS3 Multiple Backgrounds https://paulrandall.com/2010/03/19/css3-multiple-backgrounds/ https://paulrandall.com/2010/03/19/css3-multiple-backgrounds/#comments Fri, 19 Mar 2010 22:28:34 +0000 http://prandall.com/?p=340 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');}

See the Example

https://paulrandall.com/experimental/css3-backgrounds/

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

]]> https://paulrandall.com/2010/03/19/css3-multiple-backgrounds/feed/ 5