How to set the background image to fill the whole screen with css

How to set the background image to fill the full screen with css: You can use the background-size attribute, such as [background-size: cover;]. The attribute value cover indicates that the background image is expanded to a large enough size.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

There is an attribute background-size in CSS that is used to set the size of the background image. This attribute can be used to set the height and width of the background image. At the same time, we can also use it to expand the background image to the required size.

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 set, the second value will be set to "auto".

• percentage Sets 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".

• cover Expand the background image to a large enough size so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background anchor area.

• contain Expands the image to its maximum size so that its width and height fully fit within the content area.

(Learning video sharing: css video tutorial)

How to set the background image to fill the full screen with css:

Related recommendations: CSS tutorial

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