In CSS 2.1, you can only specify an offset from the top left corner of a container, or completely offset to the other three corners, but you usually want a gap between the image and the corners, as shown in the following image. Without a gap, it is visually unfriendly.

If easy is fixed size, CSS 2.1 can still do it, which is to calculate the offset from the upper left corner. But when the container size is not fixed, this cannot be done. Usually, you can only set background-position to a percentage value close to 100% to get an approximate effect. There is also the use of pseudo classes to implement absolute positioning, which is not DRY enough.

Extended syntax scheme for background-position

In the new CSS feature, it is now possible to specify the offset of the background image from any Angle by specifying the keyword in front of the offset.

background: url(bushu.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
Copy the code

If you need a fallback solution, you can write the old bottom right position into the abbreviation of background:

background: url(bushu.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
Copy the code

Background – origin scheme

When setting the offset for the background image, if the offset is consistent with the inner margin of the container. Use the scheme above:

padding: 10px;
background: url(bushu.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
Copy the code

As you can see, there is no problem with the implementation, but the code is not DRY enough. Every time you change the inner margin, you also need to change the distance in background-position. The easier way to do this is to make the distance follow the inner margin without declaring the value of the offset.

Each element has a border box, a padding box, and a Content box. By default, background-position is based on the padding box, so that the border does not cover the background image.

The new CSS has a background-origin property that can be changed to change this behavior. The default value is the padding-box property. If changed to content-box, the same effect can be achieved:

padding: 10px;
background: url(bushu.svg) no-repeat #58a bottom right;
background-origin: content-box;
Copy the code

This makes the code DRY by changing the padding in one place.

The above two methods can also be combined. You can set background-Origin to content-box and background-Position to make the offset slightly different from the inner margin.

Calc () solution

Since the calc() function can calculate the length, we can also use background-position to set the upper left offset:

background: url(bushu.svg) no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
Copy the code

Ps: we need to pay attention to the writing of the calc() function. We need to add a blank character on both sides of the internal – and + operators, otherwise we will generate parsing errors. This rule is for forward compatibility; in the future, keywords may be allowed inside calc(), and these keywords may contain hyphens (that is, minus signs).

Zhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product R&D Department Recruitment senior front-end ！！！！！ Welcome everyone to chat, you can send your resume to [email protected], join us, we can progress together, dinner together, travel together, let us from the world village partners into dahua village partners.