HTML and CSS Reference
In-Depth Information
Figure 5-12 The background image repeating across the newsletter box.
Because you have not yet specified a background-repeat declaration, the initial value of repeat is applied.
So, what other values can you use?
background-repeat : repeat-x —causes an image to repeat only horizontally.
background-repeat : repeat-y —causes an image to repeat only vertically.
Although these values are useful, this image would look better if it wasn't repeating.
1. In styles.css, below the background-image declaration you added to the #newsletter rule set, add
the following:
background-repeat: no-repeat;
2. Save styles.css.
Figure 5-13 shows the result of applying no-repeat .
Figure 5-13 The background image of the newsletter box, now with no-repeat specified.
Now, the background image doesn't repeat, and you see only one image applied to the newsletter box.
Initial value: 0% 0% | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
The background image is currently in its initial position of 0% 0%. The first 0% is the horizontal position, relative
to the left of the parent element, and the second 0% is the vertical position, relative to the top of the parent element.
When specifying a background-position value, you can use all the length unit types as described in Chapter
4, percentages, pixels, ems, and so on. You can also use the keywords left , right , top , bottom , and center .
Because the background image is currently sitting underneath the text, making the text hard to read, change its posi-
Search WWH ::

Custom Search