HTML and CSS Reference
In-Depth Information
Figure 4-8
background-clip property
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
background is clipped at the
edge of the content
background is clipped at the
edge of the padding space
background is clipped at the
edge of the border
Finally, you can specify the context of the
background-position
property using
background-origin:
box
;
where
box
is once again
content-box
,
padding-box
(the default), or
border-box
. The
background-origin
property defi nes whether
background-position
values refer to
the content box, the padding box, or the border box. Figure 4-9 shows the effect of dif-
ferent
background-origin
values on the location of the bottom-right position.
Figure 4-9
background-origin property
background-position: bottom right;
background-origin: content-box;
background-position: bottom right;
background-origin: padding-box;
background-position: bottom right;
background-origin: border-box;
image originates from the
bottom right of the element
content
image originates from
the bottom right of the
padding space
image originates from the
bottom right of the border
The
background
Shorthand Property
Like the
font
property discussed in the last tutorial, you can combine the various
background
properties into the shorthand property
background:
color
url(
url
)
attachment position repeat
;
where
color
,
url
,
attachment
,
position
, and
repeat
are values correspond-
ing to the
background-color
,
background-image
,
background-attachment
,
background-position
, and
background-repeat
style properties, respectively. If you
don't specify all of the values in the shorthand property, browsers assume default values
for the missing properties. The style
background: yellow url(logo.png) fixed center center no-repeat;
creates a yellow background on which the image fi le
logo.png
is displayed. The image fi le
is not tiled across the background, but is instead fi xed in the horizontal and vertical center.