"CSS" full screen large background

1. Use the div hierarchy, set the underlying div to fill the screen, and set the background map for the Div

<div id= "Layer1" style= "position:absolute;top:0;width:100%; height:100%; Z-index:-1 ">

</div>

2. Using the BODY element

Body{background:url No-repeate Center position red; Background-size:cover};

Body{background:url No-repeate Center position red; Background-size:contain};

Background-size:cover background picture fills the entire container, regardless of whether you see the full picture

Background-size:contain background picture fills the entire container and appears full picture

background-size:200px 100px; Numeric representation

background-size:30% 60%; Percent representation

Background-size:auto; Fills the element with the size of the picture itself, that is, the auto value

3. js get the screen width high, set the IMG width high

4. Using Filters

body{
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '/skin/v2011/images/body.png ', sizingmethod= ' Scale ');
Background-repeat:no-repeat;
background-positon:100%, 100%;
}

5. Picture automatically adapts to browser size-pending verification

Img.source-image {
width:100%;
Position:absolute;
top:0;
left:0;
}

http://liyunpeng.iteye.com/blog/2101956

"CSS" full screen large background