Details on background-size usage and background usage

Details on background-size usage and background usage

Detailed description of background-size attribute usage:
This attribute is used to control the size of the background image. The code example below describes the usage of this attribute in detail, hoping to help friends who need it.
The Background-size attribute has two parameters (cover and contain are not counted here). The parameter value can be in the exact or percentage format, it can also be the default value auto, for example:

background-size:200px 100px;background-size:50% 50%;background-size:auto;

The following describes the parameters of the Background-size attribute:
If there is only one parameter, this value is used to specify the width of the background image. In this case, the height of the background image is scaled proportionally according to the width.
If two parameters are provided, the first parameter is used to specify the width of the background image, and the second parameter is used to specify the height of the background image.
The code example is as follows:

<! DOCTYPE html> 
The Background-size attribute has two parameters. The first parameter specifies that the Background image width is 200px, and the second parameter specifies that the Background image height is 100px.
Let's look at a code example:
<! DOCTYPE html> 
In the above Code, the Background-size attribute specifies a parameter, which specifies the width of the Background image, and the height of the Background image scales proportionally according to the width value, if the size of the background image exceeds the container size, the image will be cropped.
If the value of the Background-size attribute is auto, the Background image is displayed according to the original size.
Next we will introduce the cover and contain attribute values of this attribute.
I. cover attributes:
After setting the property value to cover, scale the background image to fully overwrite the container. The background image may be larger than the container, but the excess will be cropped.
Cover is also covered in English, which is helpful for your memory and understanding.
The code example is as follows:
<! DOCTYPE html> 
In the above Code, the background image can completely overwrite the container to the minimum extent. If the ratio of the length and width of the background image is different from that of the container, it will inevitably appear in the horizontal or vertical way beyond the container, the excess will be hidden.
I. contain attributes:
This attribute can zoom in or out the background image.
Similar to the cover attribute, you can zoom in or out the image proportion. However, cover minimizes the container coverage, while contain only requires that the container be overwritten at a specific position, for example, vertically or horizontally, the container can be overwritten to a minimum.
The sample code is as follows:
<! DOCTYPE html> 
In the above Code, the background image is scaled proportionally. As the elements of the filling container can be reached first in the vertical direction, the horizontal orientation is abandoned.
The original Article address is "background-size Usage Details.