Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > background-size sets the size of the background image_html/css_WEB-ITnose

background-size sets the size of the background image_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release： 2016-06-24 11:51:04
Original
1444 people have browsed it

background-size

Set the size of the background image, displayed as length value or percentage, also Images can be retracted using cover and contain.

Syntax: 

background-size: auto | <长度值> | <百分比> | cover | contain
Copy after login

Value description:

1. auto: Default value, does not change the original height and width of the background image;

2. : appear in pairs such as 200px 50px. Set the width and height of the background image to the first two values ​​in sequence. When setting a value, use it as The image width value is proportionally scaled ; Set in turn to the value obtained by multiplying the width and height of the element by the previous percentage. When setting a value, the same as above;

4. cover: As the name suggests,

covers

, that is, The background image is scaled to to fill the entire container; 5. contain: Contain, that is, the background image is scaled to

one side close to the container To the edge

. Tips: You can enter your own code in the editing window on the right to try out the effects of different values. 

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景图片大小</title><style type="text/css">.demo {    background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;    width: 300px;    height: 140px;    border: 1px solid #999;    background-size:cover;}</style>  </head> <body><div class="demo"></div></body></html>
Copy after login

Related labels：
background-size 设置背景图片的大小
source：php.cn
Previous article：multiple backgrounds multiple backgrounds_html/css_WEB-ITnose Next article：html_html/css_WEB-ITnose about ul tag
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
Latest Articles by Author
Latest Issues
Team collaboration - What should I do if someone needs the feature I wrote as a dependency in git flow?
From 1970-01-01 08:00:00
0
0
0
Objective-c - Constraints for iOS a warning issue
From 1970-01-01 08:00:00
0
0
0
Confusion about using gitlab's fork&pull request mode within the team
From 1970-01-01 08:00:00
0
0
0
Objective-c - In iOS development, Instagram cannot be authorized after logging in. Instagram does not jump back to the application. How to get the callback address?
From 1970-01-01 08:00:00
0
0
0
Version Control - About the use of SVN and GIT in company projects?
From 1970-01-01 08:00:00
0
0
0
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template