HTML and CSS Reference
In-Depth Information
If the element expands—if you add more content, increase the text size, or resize the element with CSS—
more of the image becomes visible, as in Figure 5-24.
Figure 5-24.
Adding another paragraph expands the container element, revealing more of the background image
Text can be difficult to read when it overlays a complicated background image or when there's not enough
contrast between the foreground and background colors. Be wise in your use of background images,
ensuring they don't interfere too much with the readability of your text.
Also be sure to specify a solid background color (with the
background-color
property) that provides
enough contrast with the foreground text color in the event the image doesn't display. Most modern
browsers default to black text on a white background. If your design uses light-colored text against a dark
background image, you should declare a dark background color as well—otherwise the browser defaults
back to white if the image is missing and your light text could vanish.
Background images are rendered on top of background colors. If the image is opaque, the solid color will
show up when the image isn't available. If parts of the background image are transparent, the background
color will show through those transparent pixels. You can create some pretty neat layered effects with
transparent PNG backgrounds overlaying different colors, or even overlaying other background images.
Positioning a Background Image
By default, a background image appears in the top-left corner of the element, which is also where the tiling
begins if the image is allowed to tile. The CSS
background-position
property controls the placement of
a background image. If the image is meant to repeat, the value of
background-position
will mark the
beginning of the tiling pattern.
The property takes two values: one for the horizontal position and one for the vertical position. The
horizontal value always comes before the vertical, and if only one value appears, it will be taken as the
horizontal position. Listing 5-15 shows the CSS to place a background image at the bottom of the right
side of an element with the class “intro”.
