In CSS, you can change the size of the background image by setting the background-size attribute style for the background image. The function of this attribute is to specify the size of the background image. The syntax is "background-size: width value height value; ".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can change the size of the background image by setting the background-size attribute style to the background image.

The background-size attribute specifies the size of the background image.

Syntax: background-size: length|percentage|cover|contain;

length Set the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is given and the second one is set to auto

percentage will calculate the percentage relative to the background positioning area. The first value sets the width, and the second value sets the height. If only one value is given, the second one is set to "auto"

cover which will maintain the aspect ratio of the image and scale the image to completely cover the background positioning The minimum size of the region.

contain This will maintain the aspect ratio of the image and scale the image to the maximum size that will fit within the background positioning area.

Example:

原始图片大小

本身这个图片宽度为400px，高度224px

通过CSS background-size修改后的背景图片

(Learning video sharing: css video tutorial)

The above is the detailed content of How to change the background image size in css. For more information, please follow other related articles on the PHP Chinese website!