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.
background-position
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-
tion:
