How to set the size of background image in css

How to set the size of the background image in css: You can use the background-size attribute to set it, such as [background-size:80px 60px;], [background-size] attribute can specify the width and high.

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

(Recommended tutorial: css video tutorial)

How to set the size of the background image in css:

Attribute introduction :

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

Syntax:

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

Attribute value:

• 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:

Control the size of the background image

div
{
    background:url(img_flwr.gif);    
    background-size:80px 60px;    
    background-repeat:no-repeat;
}

Related recommendations: CSS tutorial

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