Home > Web Front-end > HTML Tutorial > The background image fills the screen_html/css_WEB-ITnose

The background image fills the screen_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:42:31
Original
1119 people have browsed it

How to use css background image to stretch and display 100% full screen? 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, div, span). The length and width values ​​of this background cannot be modified before CSS2.1.
So 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. So there are two categories that are generally used as background images:

1. It is a whole large image, the size of which exactly matches the size of the area
2. A very small bar image, After repeating, a very regular large picture background is formed.

But after the emergence of CSS3, this situation has been improved. The background-size property can make our previous wishes come true.
And this attribute can be used on firefox, chrome, and ie9.

The specific usage is as follows:
Background image size (numeric representation):

The code is as follows:


#background-size{ background-size:200px 100px; } 
Copy after login


Background image size (in percentage):

The code is as follows :


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


Background image size (expand the image proportionally to fill the element, that is, cover value ):

The code is as follows:


#background-size3{ background-size:cover; } 
Copy after login


Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):

The code is as follows:


#background-size4{ background-size:contain; } 
Copy after login


Background image size (fill the element with the size of the image itself, that is, the auto value):

The code is as follows:


#background-size5{ background-size:auto; }
Copy after login

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template