HTML and CSS Reference
In-Depth Information
Background Image Example
In the following example, we'll use the background property with a shorthand value that in-
cludes
background-color
,
background-image
,
background-position
, and
background-repeat
values.
Please take note that there is both a relative value and an absolute value within the
background-position
value. The first value,
20
pixels, is the horizontal value, po-
sitioning the
background-image 20
pixels from the left of the element. The second
value,
50%
, is the vertical value, which vertically centers the
background-image
.
A few other properties and values are also included within the
alert-success
class
rule set to further style the alert message (see
Figure 7.2
).
Figure 7.2
A success alert message including a background color and image
HTML
1.
<div class="alert-success">
2.
Woo hoo! Congratulations, you did it!
3.
</div>
CSS
1.
.alert-success {
2.
background: #67b11c url("tick.png") 20px 50% no-repeat;
3.
border: 2px solid #467813;
4.
border-radius: 5px;
5.
color: #fff;
6.
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
7.
padding: 15px 20px 15px 50px;
8.
}
In Practice
Returning to our Styles Conference website, let's add some background colors. While we
do that, we'll change a few other styles to keep all of our styles working together and to
keep all of our content legible.
Search WWH ::
Custom Search