Home >Web Front-end >CSS Tutorial >css to achieve background image stretching
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.