HTML and CSS Reference
In-Depth Information
This syntax is currently supported in IE 9+, Firefox 13+, and Opera 10.5+. As Figure
8-17
shows, IE 9 displays
the image in the first
<div> 30px
from the bottom-right corner. In the second
<div>
, there's no value after
right
,
so the right offset defaults to zero, positioning the background image hard against the right side. The final
<div>
uses negative offsets from the bottom right, partially hiding the image.
Figure 8-17.
In CSS3, you can specify where the offsets are calculated from
Changing Where the Background Begins and How Far It Extends
he new CSS3
background-origin
property controls the
background positioning area
, which determines where
the offsets for
background-position
are calculated from. Closely related is the
background-clip
property,
which controls the
background painting area
—in other words, the extent of the background. Both properties are
supported in the latest versions of all browsers in widespread use, but not in IE 8 or earlier.
he
background-origin
and
background-clip
properties accept the following properties, which are
explained diagrammatically in Figure
8-18
:
border-box
(default for b
ackground-clip
)
padding-box
(default for ba
ckground-origin
)
content-box
border
padding
border-box
content
padding-box
content-box
Figure 8-18.
The values for background-origin and background-clip are based on the CSS box model
