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.
 
Search WWH ::




Custom Search