CSS Background-image

In CSS, there are 3 ways to locate a background image:

1) Keywords:background-position:top left;

2) Pixels:background-position:0px 0px;

3) Percentage:background-position:0% 0;

The above three sentences, the picture is positioned in the upper left corner of the background, the effect is the same on the surface, in fact, the third positioning mechanism is completely different from the first two.

The first two positions are the origin of the upper left corner of the background picture, placed in the specified position. Take a look at this picture below, the specified location is "20px 10px" and "60px 50px", are the original point of the picture in that position, the figure is represented by X.

But the third position, which is the percentage positioning, is not. Its placement rule is that the point of the picture itself (x%,y%) coincides with that point in the background area (x%,y%). For example, if the drop position is "20% 10%", the actual result can be seen in the position of "20% 10%" in the image itself.

Here's an interesting example.

The background image is a stack of four squares with 100px side lengths:

How can I get it across:

The answer is to set up four div areas first in the Web page:

<div class= "Box1" >
</div>

<div class= "Box2" ">
</div>

<div class= "Box3" >
</div>

<div class= "Box4" >
</div>

Then, write CSS like this:

. Box1,. Box2,. Box3,. box4 {
Float:left;
width:100px;
height:100px;
position:relative;
Background: #F3F2E2 URL (1234.png) no-repeat;
}

. box1 {
background-position:0% 0%;
}

. box2 {
background-position:0% 33.33333%;
}

. box3 {
background-position:0% 66.66666%;
}

. box4 {
background-position:0% 100%;
}

 background-position:
0% 0% background-position:
0% 33.33333% background-position:
0% 6 6.66666% background-position:
0% 100%

DIVs set at 100px X 100px with their background-image set as The sprite graphic

The original sprite graphic.