HTML and CSS Reference
In-Depth Information
Click here to view code image
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
Click here to view code image
1. <div class="alert-success">
2. Woo hoo! Congratulations, you did it!
3. </div>
Click here to view code image
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