HTML and CSS Reference
In-Depth Information
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
down */
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.
Search WWH ::
Custom Search