CSS3 BACKGROUND IMAGES

Here is a very simple example showing the use of multiple background images in one div. Is this the end of nested elements with tons of CSS to create a layered effect? Hope so.

1
2
3
4
5
6
7
8
9

#multipleBG {
border: 5px solid #cccccc;
background:url(img1) top left no-repeat,
url(img2) bottom left no-repeat,
url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Browser Support:
FireFox 3.0 and later, Google Chrome 1.0, IE 6 and later, Opera 9.6, Safari 3.2.1

EXAMPLE

http://www.smartlore.com C Sanjeev Reddy

Great Tips.But it is not working in IE Browsers can u please check again.
- http://www.rollermonkey.com Steven L Braun
  
  Just be happy you can see text if IE browsers.
Carlos Vargas

Yeah This doesn’t work on IE8 maybe the upcoming IE9?
Carlos Vargas

I am now using the IE9 beta and the example still does not work on IE.
Martine Perrin

Hi, excellent style, but when I try this :
#portal_tab_zone .tab {
background: url(“../img/tab_left.png”) top left no-repeat,url(“../img/tab_middle.png”)top center repeat-x,url(“../img/tab_right.png”)top right no-repeat;
}
I don’t see third image on all browsers ! Why?
Tks
- Maya
  
  Because the second image lies over the third. Simple change the order. This should work:
  #portal_tab_zone .tab {
  background: url(”../img/tab_left.png”) top left no-repeat,url(”../img/tab_right.png”)top right no-repeat,url(”../img/tab_middle.png”)top center repeat-x;
  }
Curious

Hey,
Is there any way I can have multiple background images in a button?

CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

CSS3 BACKGROUND IMAGES

Sponsors

Properties