HTML and CSS Reference
In-Depth Information
1.
div {
2.
background:
url("foreground.png") 0 0 no-repeat,
url("middle-ground.png") 0 0 no-repeat,
url("background.png") 0 0 no-repeat;
3.
}
The preceding code uses a shorthand value for the background property, chaining multiple
background image values together. These shorthand values may also be broken up into
comma-separated values across the
background-image
,
background-position
,
and
background-repeat
properties.
Multiple Background Images Example
Let's go back to the success alert message once more to combine both the tick background
image and the linear gradient background image.
In order to do so, we'll include two values within the second background property. The first
value, the foremost image, will be the tick image (see
Figure 7.11
). The second value, the
rearmost image, will be the linear gradient. The two values are comma separated.
Figure 7.11
A success alert message with multiple background images including a tick
image and a linear gradient
HTML
1.
<div class="alert-success">
2.
Woo hoo! Congratulations, you did it!
3.
</div>
CSS
1.
.alert-success {
2.
background: #67b11c;
3.
background: url("tick.png") 20px 50% no-repeat, linear-
gradient(#72c41f, #5c9e19);
4.
border: 2px solid #467813;
5.
border-radius: 5px;
6.
color: #fff;
Search WWH ::
Custom Search