Sets the size of the background picture to be displayed as a length or percentage , and to scale the picture through cover and contain .
Grammar:
Background-size:auto | < length value > | < percent > | Cover | Contain
Value Description:
1, Auto: Default value, do not change the original height and width of the background picture;
2, < length value >: paired appearance such as 200px 50px, the background image width is set to the front two values, when set a value, it as the width of the picture as a value to zoom ;
3, < percent >: Any value between 0%~100%, set the background image width height to the value of the width of the element multiplied by the previous percentage, when setting a value as above;
4, cover: As the name implies for coverage , the background image is more than scaling to fill the entire container ;
5, contain: accommodate, will be the background picture, etc. than zoom to one side of the edge of the container.
tip: You can enter your own code to try different values in the edit window on the right. Task
In the 12th line of the right-hand Code Editor window, enter the correct content to fill the entire container with the background picture.
<! DOCTYPE www.dztcsd.comhtml>
<meta charset= "Utf-8" >
<title> Background Image size </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>
<body>
<div class= "Demo" ></div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
