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;


This is my content

Browser Compatibility

More info at

Leave a Reply

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