Question

淘宝的定住背景图不随电脑分辨率改变而改变，请问应该怎样改CSS样式，不支持CSS 3

请问应该怎样改CSS样式才能使背景图随分辨率改变而改变

Answer 1

1、尝试以下css代码，对每个分辨率设置不同的背景图片：

/* 大屏幕 */
@media (min-width: 1200px) { ... }
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

2、利用css3新属性：background-size

具体使用方法可以百度：css3 background-size

3、利用绝对定位方法，例如背景图是body层的，可以在body里建立一个div，div中插入img标签，也就是你的背景，长宽是100%，div的长宽也是100%（body、html标签要在css中设置长宽100%，常被忽略，虽然看似没有，但是有效的），代码例如：

<style type="text/css">
html, body { width:100%; height:100%; margin:0; padding:0;}
.divBg { position:absolute; left:0; top:0; height:100%; width:100%;}
.divBody{ position:absolute; left:0; top:0; height:100%; width:100%; text-align:center;}
</style>
<div class="divBg"><img src="/img/bdlogo.gif" height="100%" width="100%" /></div>
<div class="divBody">
	<div class="yourcss">
        <h1>文字内容在这里，不受影响</h1>
        <h1>文字内容在这里，不受影响</h1>
        <h1>文字内容在这里，不受影响</h1>
        <h1>文字内容在这里，不受影响</h1>
        <h1>文字内容在这里，不受影响</h1>
    </div>
</div>

类似的，如果想要做固定区域的背景图，一样可以相对于父级元素长宽设定。

如图：

代码可见附件：

Answer 2

那就只能做一个超大（超长）的背景，比如1920px（目前最大分辨率）
然后让背景居中，多余部分隐藏
这样小分辨率就只能看到中间一部分背景
当分辨率变大会看到其他部分 的背景

Answer 3

那你可以设置图片的大小为百分比，这样会根据分辨率大小 自动关机设置大小