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

Custom Search