让div的背景图片适应各种显示屏的分辨率

平时我们做网站都是980或者960或者1000等的布局,版心很少有超过1000.我现在做的网站版心为1040,因为在1024的分辨率下会出现问题。现在就背景图问题跟大家分享一下。


一般网站我们都会把需要全屏的背景图给body,这样很容易让它适应各个浏览器和各个显示屏的分辨率。当网站的背景图不是一整张的时候,head或者content部分一个背景图,而bottom部分一个背景图,而中间内容部分高度需要自适应,不能定死高度。这个时候会把背景图分别给两个div.然后用定位固定他们的位置。


.float_top_bj {
    position:absolute;
    z-index:91;
    /*width:100%;*/
    min-width:1140px;
    margin:0 auto;
     url(".. /../images/commonality/fu_dbg.png") repeat-x scroll center top transparent;
    height:368px;
    top:110px;
    left:0;
}
.float_bottom_bj {
    position:fixed;
    z-index:92;
    width:100%;
     url(".. /../images/commonality/bj_db.png") repeat-x scroll center bottom transparent;
    height:400px;
    bottom:24px;
    left:0;
}

这个时候我发现了一个问题,就是当给div宽为100%时,浏览器窗口缩小或者在低于1040的分辨率下背景图不能全屏,会出现白边。用谷歌的开发者工具或者火狐的firebug选中不到那个白边,于是我想是不是那个白边已经不是网站的区域了,居然不能选中。我想是不是因为版心为1040,而低屏率下宽为1024,都不够版心的,而div取到100%的宽最宽也就是1024个像素了,于是背景图的宽度达不到1040,而内容等版心又有1040宽,因此(1040-1024)的右边部分就出现了白边了。

针对这个方法,我是这样解决的:给div一个最小宽度,且让它的宽度自动适应。这个最低宽度要大于1040。这样我的背景图就全屏了。在地屏率上和浏览器窗口缩小时都没有白边了。

大家有遇到这样的问题吗,很想有人分享自己的 ,我查了好久,好像都没有人遇到这种问题哦!!!


注意:width:100%或者min-width:1140的设置都会受到定位的影响。

#center {
    min-width:1140px;
    width:atuo !important;
    width:1140px;
    z-index:90;
}

没有定位的情况下会很好。

#header{           
    min-width:1140px;
    width:auto !important;
    width:1140px;
    margin:0 auto;
    z-index:95;
    background:#fff;
}
#header{
    width:auto !important;
}

还要考虑兼容IE6哦

你可能感兴趣的:(背景图全屏兼容性)