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-image:url(bg.jpg), url(naota23.jpg);
background-position: left top, center bottom;
background-repeat: no-repeat;


This is my content

Browser Compatibility

More info at

About Ricard Torres

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.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

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