Home  >  Article  >  Web Front-end  >  css to achieve background image stretching

css to achieve background image stretching

高洛峰
高洛峰Original
2016-11-24 11:48:151956browse

Use css3 attribute: background-size

background-size: cover to stretch like a desktop wallpaper

The following is the explanation from w3c:

Syntax
background-size: length|percentage|cover|contain; value Description
length sets 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 positioning area.

contain Expands the image to its maximum size so that its width and height fit completely into the content area.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn