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!