CSS3 background-size property

 The function of the CSS3 background-size property is to set the size of the background image ( background-image ). The background-size property allows a variety of background image size adjustment methods, such as customizing the width and height of the background image, according to the container (such as DIV block ) Size to adjust the percentage of the background image, enlarge the background image to fill the entire container area, or automatically reduce the size of the background image so that it can be completely displayed within the scope of the container. In the past, before CSS2, it was necessary to adjust the background image and DIV. The size is usually opened directly by drawing software to process the image. The background-size property of CSS3 provides a more efficient way for web designers to adjust the background image, and it has been supported by most mainstream browsers.

CSS3 background-size property syntax

background-size: background image size;

There are several setting values ​​for the background-size property of CSS to adjust the parameters of the background image, as shown in the table below.

CSS3 background-size possible settings

Set value	Description
auto	The default value maintains the original size of the background image.
length	The size of the custom background image can be represented by two numbers. First, set the width, then set the height. It cannot be a negative number. If only one number is written, the second number will be automatically set to the effect of auto, and the background image is automatically set. Zoom.
percentage	The size of the custom background image is expressed by two percentages. The first percentage is the set width, and the second percentage is the set height. If you only write one, the second one will be automatically set to the effect of auto, the background The picture is automatically scaled.
cover	When the background image is smaller than the container, the background image is enlarged to the size of the container and filled. The disadvantage is that if the aspect ratio of the container does not match the aspect ratio of the background image, the background image will be distorted.
contain	When the background image is larger than the container, the background image is reduced to be able to be displayed in the container.

CSS3 background-size property example 1. Use length to set the width and height of the background image

<style>
#D0{
    margin-bottom:15px;
}
#D1{
    width:400px;
    height:120px;
    background-image:url(background image URL);
    background-repeat:no-repeat;
    border:1px #ccc solid;
    background-size:360px 100px;
}
</style>
This is the background image used, the size is 300x80<br>
<div id="D0"><img src="background image URL"></div>
This is the modification After the background image, the size is 360x80<br>
<div id="D1"></div>

Effect of the example

This is the background image used, the size is 300x80

This is the modified background image, the size is 360x80

Example 1: A relatively small background image is used in a DIV block with a size of 360x80 . We use the background-size property to increase the width of the background image to 360px and the height to 80px, although it has not yet reached the DIV area. The size of the block , but it is already obvious that the original background image has been enlarged.

When using the background-size custom width and height, pay attention to the ratio. It is best to calculate the enlarged width and height by yourself, so as to prevent the background image from being distorted due to the incorrectly enlarged ratio. Then let’s look at example two. , How to enlarge the background image without setting the width and height yourself.

CSS3 background-size property example 2: Use cover to expand the background image

<style>
#D2{
    margin-bottom:15px;
}
#D3{
    width:400px;
    height:120px;
    background-image:url(background image URL);
    background-repeat:no-repeat;
    border:1px #ccc solid;
    background-size:cover;
}
</style>
This is the background image used, the size is 300x80<br>
<div id="D2"><img src="background image URL"></div>
This is the modified Background image of 400x120<br>
<div id="D3"></div>

Effect of the example

This is the background image used, the size is 300x80

This is the modified background image, the size is 400x120

Example 2 uses the background-size cover effect. You don’t need to set the width and height of the background image yourself like in Example 1. Let the cover effect directly enlarge the background image and fill the entire DIV block . Is it convenient? However, the disadvantage is that the scale of the enlarged background image will change according to the proportion of the DIV block , so sometimes the picture will be distorted. Please consider using the cover effect. The proportion of the DIV block in Example 2 is similar to the original picture, so it looks It's pretty normal.

CSS3 background-size property example 3. Use contain to expand the background image

<style>
#D2{
    margin-bottom:15px;
}
#D3{
    width:200px;
    height:50px;
    background-image:url(background image URL);
    background-repeat:no-repeat;
    border:1px #ccc solid;
    background-size:contain;
}
</style>
This is the background image used, the size is 300x80<br>
<div id="D2"><img src="background image URL"></div>
This is the modified Background image of 200x50<br>
<div id="D3"></div>

Effect of the example

This is the background image used, the size is 300x80

This is the modified background image, the size is 200x50

The DIV block of example 3 is relatively small, even smaller than the background image to be used. At this time, we hope that the background image can still be placed in the entire DIV block , and the pattern of the image should not run away. Use the contain effect of the background-size property to shrink the background image into the DIV block .

In fact, the contain effect can not only reduce the background image, but also enlarge the background image. Assuming that the DIV block of example 3 is relatively large, the contain effect using the background-size property will enlarge the original image in equal proportions, which is also displayed in the entire DIV Within the block .