css to achieve background image stretching

高洛峰
Release: 2016-11-24 11:48:15
Original
1955 people have browsed it

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.


Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template