How to set the width and height of the background image using background-size

云罗郡主
Release: 2018-10-18 15:45:36
forward
10256 people have browsed it

This article brings you the content about how to set the width and height of the background image using background-size. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to set the width and height of the background image using background-size

Use the background-size attribute to set

语法:background-size: length|percentage|cover|contain;
Copy after login

length:
Set the background The height and width of the 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".
(The entire image will be displayed)

percentage:
Set 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".
(The entire image will be displayed)

cover:
Maintains the aspect ratio of the image and scales the image to the smallest size that will completely cover the background positioning area.
Some parts of the background image may not be displayed in the background positioning area.
(Only show part of the image)

contain:
Maintain the aspect ratio of the image and scale the image to the maximum size that will completely cover the background positioning area.
(The entire image will be displayed, but the image may be repeated)

The above is a complete introduction to how to set the width and height of the background image using background-size, if you want to know more aboutHTML video tutorial, please pay attention to the PHP Chinese website.


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

source:csdn.net
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