HTML and CSS Reference
The background-position property is for offsetting the starting point of the
background image. It takes two values that correspond to the horizontal and vertical po-
sitioning. You can set specific values or use preset keywords:
/* background image is offset 10 pixels left and 25 pixels
background-position: -10px 25px;
The properties background-clip and background-origin have been intro-
duced in CSS3. Both these properties take the same values, but each has a different func-
tion. The background-clip is for specifying the “background painting area,” which
is the area where the color and images will be rendered. The background-origin
specifies the “background positioning area,” which is for determining where the point of
origin is for the background, meaning the point at which the upper-left corner of a non-
repeated image would begin (the 0,0 point if you are familiar with coordinate spaces).
The three values for these properties are as follows:
• border-box : The background painting area/positioning area extends to the
outer edge of the border. The border will run over the top of the image, but it
can be semitransparent.
• padding-box : The background painting area/positioning area extends to the
inner edge of the border. This is the default value.
• content-box : The background painting area/positioning area extends only
to edge of the content area, which is the area before any padding is applied.
10 Setting the width and height properties on an element and then setting overflow:auto will cause
a scrollbar to appear so the user can get to any overflowing text.
Figure 6-16 illustrates these different values.