HTML and CSS Reference
In-Depth Information
Figure
8-19
shows how IE 9 offsets the background image differently in three
<div>
elements in background-
origin.html. The left one uses
border-box
, which tucks the background image under the translucent border.
The middle
<div>
uses the default
padding-box
, which puts the image inside the border. The right
<div>
uses
content-box
, which puts the image inside the padding.
Figure 8-19.
The value of background-origin determines where the background begins
What might come as a surprise is that the whole area of each
<div>
is covered by the background image if
you comment out the
background-repeat
property in background-origin.html like this:
#box1, #box2, #box3 {
width: 200px;
padding: 20px;
border: 20px rgba(255, 0 , 0 , 0.2) solid;
float: left;
margin-left: 10px;
background-image: url(images/bg tile.jpg);
/*
background-repeat: no-repeat;
*/
}
Because bg_tile.jpg is a seamless background image, it's impossible to see what's going on, so I've used a
different background image in background-origin_rpt.html (see Figure
8-20
).
