Puzzle Answer: background-position attribute problem of background picture in CSS

CSS in the background of the CSS background image in the background-position of the left top in the end is relative to who? If you are having such doubts, go ahead and read this article.

The following questions were encountered when studying:

1. What is the left top in the background-position of the background image in CSS relative to who, Content-box?padding-box?border-box?

2. is the Backgound-image and Background-color in the background attribute consistent with the box relative to it?

3. How to do the background image on the right side of the container 10px, the bottom 10px?

First we look at the box model: box model from the outside to the inside: Margin-box,border-box,padding-box,content-box.

Now let's answer the first question we encountered, and the left top in background-position is relative to which box. The answer is relative to the outer edge of the Padding-box.

The following HTML code and CSS code are implemented to a class= "MYP" container set a background picture, the background image of the Background-position property value is left top. The HTML code is as follows:

1 <p class= "MYP" ></p>

The CSS code is as follows:

1. myp{2         height:300px;3         width:400px;4         border:10px solid black;5         padding:20px;6         background:url ("Road.png") no-repeat top left; 7      }

The effect is as follows:

You can see the MYP padding set to 20px, the figure green represents padding, the background image of the upper left corner and the green padding the outer edge of the alignment, so the answer to the first question is padding-box;

Just now we see that the background image is relative to the outer edge of the Padding-box. Now let's look at the second question, is the box consistent with the background image and background color in the Background property?

Just for the example, let's change the CSS code a little bit, set a pink background, set the border to a dashed line, and change the CSS code as follows:

. myp{        height:300px;        width:400px;        border:10px dashed black;        padding:20px;        Background:url ("Road.png") no-repeat top left pink;

The effect is as follows: You can see that the background color is stretched to the border. This indicates that the background color is relative to the outer edge of the Border-box. So it is clear that the background image and the background color of the relative box is inconsistent.

Now let's look at the third question: How do you make the background image on the right side of the container 20px, bottom 20px?

We know that if we just background-position:right bottom, the background image is just the border, as shown, this looks particularly ugly, we want to be a background picture and the border between a padding distance.

In fact, CSS3 is to support the relative arbitrary angle to offset, as long as we specify the key at the offset front, we will change the background position to background-position:right 20px bottom 20px, the specific CSS code is as follows:

1 2 3 4 5 6 7 8

.myp{ height:300px; width:400px; border:10pxsolidblack; padding:20px; background: url("road.png") no-repeat; background-position:right20px bottom20px; }

The effect is as follows:

Also, if we have another method and set the Background-origin property to Content-box, the Background-origin property defaults to Padding-box, That is, set the background relative to the padding box so that the background image is set relative to the Content-box. The CSS code is as follows:

. myp{        height:300px;        width:400px;        border:10px solid black;        padding:20px;        Background:url ("Road.png") no-repeat right bottom;        Background-origin:content-box;     }

The effect is as follows:

Of course we can also use the Calc () function of CSS to calculate relative to the upper left corner offset, we can get through 100%-20px,100%-20px, just more trouble, CSS code is as follows:

Apache PHP MySQL

1. myp{2         height:300px;3         width:400px;4         border:10px solid black;5         padding:20px;6         background: URL ("road.png") No-repeat right bottom;7         background-position:calc (100%-20px) Calc (100%-20px); 8      }

Related articles:

Summary of Background-position property usage in CSS

How to set CSS background background and background colors in Web pages

Related videos:

CSS in-depth understanding of border video Tutorial