Working with images - HTML5 - page 83

incLudinG backGround iMaGes

The collective background properties offer designers the most flexibility in terms of design. With
background-color , you can determine the color of any element's background. This property uses
the same color values for backgrounds as the color property does for text: named colors, hexa-
decimal values, RGB values, and RGBA values. To define a background as black, a simple example
would be:
background-color: black;

Through CSS you can use a single image to fill the screen or repeat that image just along the hori-
zontal or vertical axis of any section. Or you can place a single image smack dab in the center of
your page — or any other position you like.

To define an image in the background, use the background-image property:
#wrapper { background-image: url(“../images/main_bg.jpg”) }

The url() value holds the path to the graphic you want in the background. For compliance in both
HTML5 syntaxes, enclose the relative or absolute path in quotes. If you use a relative path, make
sure it is relative to the style sheet — or wherever the background-image property is declared — and
not the source code.

The default behavior of any background image is to fill the containing element by repeating or tiling ,
horizontally and vertically, as much as necessary. You can control this behavior, however, through
the background-repeat property, which has four primary values:

➤

repeat: When set to repeat , the image tiles horizontally and vertically to fill the containing

element.

➤

repeat - x: For images declared with a repeat-x value, the image repeats horizontally, along

the X axis.
repeat-y:

➤

Background images with a repeat-y value tile vertically, along the Y axis.

➤

no-repeat: If background-image is set to no-repeat , the image is rendered just once.

Not only can you control the repetition of a background image, you can define its position, both
horizontally and vertically, within the containing element. The background-position values are
stated as a pair, with the horizontal position first and the vertical second. This property allows you
to place the image in three different ways: by name, fixed measurement, or percentage. For example,
if you wanted to center a 200-pixel square image in the middle of an 800-pixel-by-400-pixel con-
tainer (Figure 10-8), your CSS property could look like any of these three declarations:
background-position: center center;
background-position: 50% 50%;
background-position: 300px 100px;

Valid named values for the horizontal position are left , center , and right , and those for vertical
position are top , center , and bottom .