Home > Article > Web Front-end > 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!