How to set the width and height of the background image using background-size

This article brings you the content about how to set the width and height of the background image using background-size. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Use the background-size attribute to set

语法：background-size: length|percentage|cover|contain;

length:
Set the background The height and width of the image.
The first value sets the width, and the second value sets the height.
If only one value is set, the second value will be set to "auto".
(The entire image will be displayed)

percentage:
Set the width and height of the background image as a percentage of the parent element.
The first value sets the width, and the second value sets the height.
If only one value is set, the second value will be set to "auto".
(The entire image will be displayed)

cover:
Maintains the aspect ratio of the image and scales the image to the smallest size that will completely cover the background positioning area.
Some parts of the background image may not be displayed in the background positioning area.
(Only show part of the image)

contain:
Maintain the aspect ratio of the image and scale the image to the maximum size that will completely cover the background positioning area.
(The entire image will be displayed, but the image may be repeated)

The above is a complete introduction to how to set the width and height of the background image using background-size, if you want to know more aboutHTML video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to set the width and height of the background image using background-size. For more information, please follow other related articles on the PHP Chinese website!