位置:WEB前端 > css教程

css 背景图片background 100%显示

时间:2015-07-15
简介:WEB前端|假设用户显示器的宽度是1000px,然后用background-image设置一张宽度为800px的背景图片,然后把图片的排列方式设置为no-repeat。问题

假设用户显示器的宽度是1000px,然后用background-image设置一张宽度为800px的背景图片,然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的,怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%,也就是拉伸这张背景图片。

<style type="text/css">
div{
width:100%;
height: 500px;
background-image:url('2.png');
background-size:cover;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='2.png') 
}
</style>
<body>
<div></div>
</body>


也可以这样:

<style type="text/css"> 

#bodybg { 
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 0;
}
#bodybg .stretch { 
    width:100%;
    height:100%;

</style>

<body>

<!-- 背景图片自适屏幕分辨率 -->
<div id="bodybg">
  <img src=XXXXXX.jpg class="stretch" />
</div>
</body>    

TAGS:background 100%

上一编:css单位 px和em的区别

下一编:CSS background-position 属性使用介绍

New Hot