HTML and CSS Reference
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 )
Figure 8-18. The values for background-origin and background-clip are based on the CSS box model