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
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 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