Question

出于某种原因，我无法在浏览器中获得跨越100％宽度的图像。

您可以找到我的网站here.

我的div读到：

    <div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
    </div>

任何帮助都将不胜感激。

Answer 1

在您的网站中，您可以将div拉伸到整个页面宽度。但是除非你这样做，否则背景图像不会延伸：

background-size: 100%;

Answer 2

不会使用包含它们的元素的大小调整背景图像的大小。为什么不使用

<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg" 
  style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
</div>

并删除属性

height: 560px;

Answer 3

添加background-size: 100% auto;

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;"> 
    </div>

Answer 4

使用此CSS属性

background-size:100% 560px;

这表明你的背景图片应该扩展到100％的宽度，但高度为560px。

Answer 5

我不喜欢拉伸图像以适应浏览器窗口的想法。因为这取决于客户的机器如何显示网站。

所以，我不会建议搜索这样的解决方案。更确切地说：

使用重复图像作为背景
修复图像容器的尺寸。您尝试创建的效果看起来仍然很酷
检测屏幕尺寸并根据分辨率更改背景。

确保Div为100％

5 个答案: