CSS3 now allows for multiple values on the background-image, background-position and background-repeat properties. This means that now you can specify up to four different background images on the same element. An enhancement like this is not currently supported by IE8 (and lower) but it will be in the next browser's release (9). Now, let's say that we have a container with an heading element inside. We want to display four different background images on each box's corner. Here's how we can do this with CSS:
#browsers {
width: 60%;
margin: 0 auto;
height: 400px;
line-height: 400px;
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(http://dev.css-zibaldone.com/onwebdev/img/firefox.png),
url(http://dev.css-zibaldone.com/onwebdev/img/chrome.png),
url(http://dev.css-zibaldone.com/onwebdev/img/safari.png),
url(http://dev.css-zibaldone.com/onwebdev/img/opera.png);
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
background-repeat: no-repeat;
color: #fff;
text-align: center;
line-height: 400px;
}
#browsers h1 {
display: inline;
font: 4em Impact, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
}
As you can see, the four values for the background-image and background-position properties are separated by a comma. Also, if all values are the same, you can omit to specify them by providing only one single value (as in the background-position property.