How to use Multiple Backgrounds with CSS3

Individual background

background-image: url(bg.jpg), url(avatar.jpg);
background-position: center bottom, left top;
background-repeat: no-repeat;Code language: HTTP (http)

Shorthand property

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;Code language: CSS (css)

Full Code

Let's play with everything:

background-color:#CDA869;
background-image:url(bg.jpg), url(naota23.jpg);
background-position: left top, center bottom;
background-repeat: no-repeat;
height:200px;
width:200px;
color:white;Code language: CSS (css)

Example

This is my content

Browser Compatibility

  • Firefox +3.6
  • Safari +1.3
  • Chrome +10
  • Opera +10.50
  • Internet Explorer +9.0

More info at CSS3.info

Leave a Reply

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