Adding background image with CSS is nothing new, this attribute has been there since its beginnings. But we were limited to only add one image in one declaration block. Now, CSS3 is raising the bar by providing the option of adding multiple backgrounds.

How to use it?

Formerly, when we need to add more than one background image, we most likely will interrupt the HTML structure as well as add more classes to get the desired result through CSS, something like this.

.overcast1 {
	background-image: url("images/overcast.png");
	background-position: 150px 25px;
}
.rainbow {
	background-image: url("images/rainbow.png");
	background-position: 200px 10px;
}
.overcast2 {
	background-image: url("images/overcast.png");
	background-position: 250px 25px;
}
.sunny {
	background-image: url("images/sunny.png");
	background-position: 100px 10px;	
}

The code above is clearly outdated. In CSS3 this code can be concatenated in single background-image property, as you can see below:

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
			  url("images/rainbow.png"), 
			  url("images/overcast.png"), 
			  url("images/sunny.png");
  background-position: 150px 25px, 
			  200px 10px, 
			  250px 25px, 
			  100px 10px;
  background-repeat: no-repeat;
}

With this piece of code, we have added the same four images with different positions in accordance, producing this marvelous results.

Source: Hongkiat

Nuno Ricardo Da Silva – Creative – Criativo – Comunicação Online – Online Communication – Web Design – Design – Porto – Design Porto – Web Design Porto – Designer Porto