css to realize background image stretching and filling

First of all, we know that there are two types of background images:

(Recommended learning: css Quick Start)

1. A whole large picture, the size of which exactly matches the size of the area;

2. A very small bar picture, after repeating, forms a very regular large picture background.

So how to achieve stretching and filling of background images?

The method is as follows:

Background image size (numeric representation):

The code is as follows:

#background-size{
background-size:200px 100px;
}

Background image size (percentage representation):

The code is as follows:

#background-size2{
background-size:30% 60%;
}

Background image size (expand the image proportionally to fill the element, that is, the cover value):

The code is as follows:

#background-size3{
background-size:cover;
}

Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):

The code is as follows:

#background-size4{
background-size:contain;
}

Background image size (filling the element with the size of the image itself, that is, auto value):

The code is as follows:

#background-size5{
background-size:auto;
}

The above is the detailed content of css to realize background image stretching and filling. For more information, please follow other related articles on the PHP Chinese website!