i

Learn HTML and CSS in 10 Days

Using Multiple Background Images

For over a long period, only one background image was allowed for the elements at a time. This created some constraints while making a page. But with CSS3, we can provide an element with more than one background by giving several values into 'background' as well as 'background-image' property.

The value of the background image that you are providing at first will be the foremost background image, while the value of the background image that you are providing, at last, will be the rearmost background image. Any value lying in between the first one and the last one will be kept in the middle.

div {

  background:  url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;

}

Multiple Background Images Example

In the Background Image Example, we are going to use both the old background image as well as the linear gradient background image.

For that, we are going to add up two values inside the second background property. The first one is the tick image, while the rearmost image is our linear gradient. Both of them are separated by commas.

HTML

CSS

.notice-success {

  background: #67b11c;

  background: url("tick.png") 20px 50% no-repeat, linear-gradient(#72c41f, #5c9e19);

  border: 2px solid #467813;

  border-radius: 5px;

  color: #fff;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  padding: 15px 20px 15px 50px;

}