html - css background-size 失败以及图像位置

Question

好的，对于我的网站，用户/成员(member)可以选择上传/链接自定义图像以用于我网站的起始页。这适用于几乎所有支持背景大小的新浏览器。但如果浏览器不支持 css3 background-size，则不会用图像填充整个 div 部分。

昨天我有机会在 25"英寸显示器上测试我的网站，结果发现图像显示部分出现故障。最终发生的是图像向左移动。

今天检查代码时我忘记了我在“background-position: top left;”中有这一行但我记得为什么我把它留在代码中，当我添加“顶部中心”或只是“顶部”时，背景仍然显示，但它的左侧有 6 - 10 像素的白色 gab。我尝试使用 left: 0px;但无法让它工作，因为我使用的是 position: fixed;如果我将其更改为 position: absolute，它会显示完整图像，最终会在底部创建一个滚动条。

这是我目前使用的CSS部分的代码

#cpBackgroundImg  { 
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box; 
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}

这是实际显示图像的代码的另一部分

<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>

谁能告诉我如何解决这个问题？ - 谢谢

http://jsfiddle.net/Hnwjg/6/

Answer 1

width: 1600px;

您测试的显示器的分辨率是否大于 1600？如果是这样，div 看起来像是将图像的宽度限制为 1600。这意味着图像右侧会有空白区域？

只是一个想法。