Home > Article > Backend Development > How to stretch css background image to 100% and set full screen display
How to stretch css background image to 100% and set full screen display
- 不言Original
- 2018-03-30 11:06:2811881browse
Nowadays, the use of css is also very important to many users. It can stretch images very well without leaving traces. This article will share with you about stretching css background images to How to set up 100% full screen display, friends in need can refer to it.
Nowadays, the use of CSS is also very important to many users. It can stretch images very well without leaving any traces. So when we use css, what should we do if the background image is stretched to 100% and displayed full screen? What is the specific code?
How to use css background image to stretch it to 100% full screen display? This question may sound simple. But I'm sorry to tell you. It's not as simple as we think.
For example, set a background in a container (body, p, span). The length and width of this background cannot be modified before CSS2.1.
Therefore, the actual result can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. It is used to control the display of background images. Therefore, there are generally two types of background images:
1. It is a large picture, the size of which exactly matches the size of the area
2. A very small bar chart, after repeating, forms a very regular large picture background.
But after the emergence of CSS3, this situation has been improved. The background-size property can make our previous wishes come true.
And this property can be used on firefox, chrome, and ie9.
The specific usage method is as follows:
Background image size (numeric representation):
code show as below:
#background-size{
background-size:200px 100px;
}
Background image size (in percentage):
code show as below:
#background-size2{
background-size:30% 60%;
}
Background image size (expand the image proportionally to fill the element, that is, cover value):
code show as below:
#background-size3{
background-size:cover;
}
Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):
code show as below:
#background-siz
e4{
background-size:contain;
}
Background image size (fill the element with the image's own size, i.e. auto value):
code show as below:
#background-size5{
background-size:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<style>
#bgvid1{
width:100%;
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
height: auto;
z-index: -100;
background-size: cover;
}
</style>
<body>
<img id="bgvid1" src="/uploads/common/veryhuo.gif">
</body>
</html>
<p style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></p>Related recommendations:
What should be the appropriate size for repeated tiled css background images? _html/css_WEB-ITnose
The above is the detailed content of How to stretch css background image to 100% and set full screen display. For more information, please follow other related articles on the PHP Chinese website!