Home > Others

CSS3 Background Picture Full Screen display example

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

How do I stretch with a CSS background picture and 100% full screen display? The question sounds very simple. But I regret to tell you. It's not as simple as we think.
such as a container (Body,div,span) set a background. The height-to-width value of this background cannot be modified until css2.1.
So the actual result is only repeated display, so there are repeat,repeat-x,repeat-y,no-repeat these properties. is used to control the display of background pictures. So there are 2 categories that are commonly used as background pictures:

1. It's a whole big picture, size and area fit exactly.
2. A very small bar chart, through the repeat, forming a very regular large picture background.
But the situation was improved after the CSS3 appeared. The Background-size attribute can make our previous hopes come true.
And this property can be used on both Firefox,chrome and IE9.
Background Chart Dimensions (numerical representation):

CSS Code
#background-size{
background-size:200px 100px;
}

Background Chart Dimensions (percentage representation):
CSS Code

#background-size2{
background-size:30% 60%;
}

Background figure dimensions (equal ratio extended picture to fill element, i.e. cover value):

CSS Code

#background-size3{
Background-size:cover;
}

Background figure size (equal to smaller picture to fit element size, i.e. contain value):
CSS Code

#background-size4{
Background-size:contain;
}

Background Figure size (fills the element with the picture itself, that is, the auto value):
CSS Code

#background-size5{
Background-size:auto;
}

Example

Example

<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.111cn.net/"/>
<title> Ant Tribe </title>
<style type= "Text/css" >
html{
Background:url (mytest/demo/antzone.jpg) No-repeat Center Center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
}
</style>
<body>

</body>

The above code to achieve full screen adaptive requirements, and the picture will be proportional scaling, there will be no deformation phenomenon.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More