How to set the background image position in css

In CSS, you can use the background-position attribute to set the position of the background image. This attribute can set the starting position of the background image and position the background image. The background-position property needs to have two values, which control the horizontal and vertical positioning respectively.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can use the background-position attribute to set the position of the background image and position the background image.

In CSS, there are three ways to position background images:

1) Keywords: background-position: top left;

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

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

The above three sentences all position the image in the upper left corner of the background. On the surface, the effect is the same. In fact, the third positioning mechanism is completely different from the first two.

The first two positions are to place the origin of the upper left corner of the background image at the specified position. Please look at the picture below. The specified positions are "20px 10px" and "60px 50px". The origin of the picture is at that position, which is represented by an X in the picture.

But the third kind of positioning, namely percentage positioning, is not like this. Its placement rule is that the point of the picture itself (x%, y%) coincides with the point of (x%, y%) of the background area. For example, if the placement position is "20% 10%", the actual result is as shown below. You can see that this point is at the "20% 10%" position of the picture itself.

Here is an interesting example.

The background image is four squares with a side length of 100px stacked together:

How can I turn it sideways:

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

<div class="box1">
</div>
<div class="box2"">
</div>
<div class="box3">
</div>
<div class="box4">
</div>

Then, write the 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%;
}

The second and third squares The settings are not "0% 25%" and "0% 75%" as commonly imagined.

But to be honest, it is easier to use the pixel setting method in this example. The main advantage of using the percentage setting is that when the page is scaled, the background image will also scale with it.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the background image position in css. For more information, please follow other related articles on the PHP Chinese website!