Background-size setting the size of the background picture

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.