Introduction to the usage of background-position of background image position in CSS3

This article shares with you the usage of background-position in CSS3. Friends in need can refer to it.

Before setting background-position in css3, you could set the position from the upper left corner of the element.

For example:

div{background-position:20px 40px;/*20px from left & 20px from top*/}

The problem is that the exact position cannot be determined from another point, for example from the bottom/right, we can only start from the top left corner.

We can write: background-position: right bottom; we can also write: background position: 70%/starting from left/80%/starting from top/;,

But we can’t start from Write 20px from the right and 20px from the bottom.

Let’s take a look at the new background-position attribute

To solve this problem, CSS3 provides us with the ability to determine where to start positioning and determine the 0,0 point Options.

How do we achieve it?

We can now use css3 to write the beginning of the horizontal and vertical position, such as the value of the starting point in the lower right corner, instead of just writing 2 values ​​​​(the horizontal and vertical point in the upper left corner).

Let’s create an example:

First create an empty div with some styles:

HTML:

CSS

.box{   
  width:300px;
  height:300px;
  background-color:#ddd;
  padding:10px;
  border:solid 3px #333;
  border-radius:10px;
}

Now we will add a fixed background size background image (new feature in CSS3).

.box{   
    background:url(image/cup.jpg) no-repeat;
    background-size:150px 150px;
}

Finally we will add the new background position.

First we set the horizontal starting point, for example: right and after that we can set the distance we want, for example 20px.
Secondly, we set the vertical starting point, for example: bottom, and after that we set the distance we need from that position, for example 40 pixels.

CSS new background position

.box{ background-position :right 20px bottom 40px;}

The effect is as follows:

We have achieved this effect. In addition, we can also To implement a box containing multiple background images, the code is as follows;

The effect is as follows:

##

The above is the detailed content of Introduction to the usage of background-position of background image position in CSS3. For more information, please follow other related articles on the PHP Chinese website!