HTML and CSS Reference
In-Depth Information
The problem with doing this is that the text sits on top of the background image, which doesn't look right,
as shown in Figure 5-23.
Figure 5-23 The footer link text conflicting with the background image.
You could just remove the text from the HTML and put an <img> element in its place. However, as the
footer logo is more of a style than content, it's a best practice to make it a background image instead.
To work around the clashing of text and background image, you can use a technique commonly referred to
as Image Replacement.
3. In the newly added .small-logo a rule set, add the following declarations:
font: 0/0 a;
text-shadow: none;
color: transparent;
4. Save styles.css.
You will learn about text-shadow and font properties in Chapter 11. For now, know that the font property
makes the font size and line height zero. Any shadow that may be applied to the text is removed and the color is
made transparent. These three properties together hide text in all browsers (see Figure 5-24) so now, although the
text is still in the HTML, it can't be seen, allowing just the background image to show. If CSS is disabled in the
browser, the text will be shown in place of the background image. Ideal!
Figure 5-24 The footer link with hidden text, allowing the background image to show through.
Code Challenge: Add More Background Properties
In styles.css, do the following:
1. Add a new rule set for #header nav > ul > li with the declaration background: white; .
2. In the #footer rule set, change the background-image and background-color declarations to
use the background shorthand property.
3. In the .showcase rule set, add the declaration background: #f5f5f5; .
Search WWH ::

Custom Search