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;

Shorthand property

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

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;

Example

This is my content

Browser Compatibility

More info at CSS3.info

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*