使用CSS，如何使图像作为背景图像跨越页面的整个宽度？

Question

比如说，就像这个例子一样： http ： //www.electrictoolbox.com/examples/wide-background-image.html

当我这样做时，无论我做什么，我最终都会在图像周围出现白色边框。 我究竟做错了什么？

Answer 1

如果你希望使用background-image: url(...); ，我认为你不能。 但是，如果你想玩分层，你可以这样做：

<img class="bg" src="..." />

然后是一些CSS：

.bg
{
  width: 100%;
  z-index: 0;
}

现在，您可以通过使用z-index等来对拉伸图像上方的内容进行分层。 一个快速说明，图像不能包含在width: 100%;任何其他元素中width: 100%; 申请整个页面。

如果您不能依赖background-size这是一个快速演示： http ： //jsfiddle.net/bB3Uc/

Answer 2

理想情况下，背景图像总是使用CSS完成。 所有其他图像都是用html完成的。 这将涵盖您网站的整个背景。

body {
  background: url('../images/cat.ong');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

Answer 3

您将CSS设置为：

#elementID {
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
    height: 200px;
}

它使图像居中，但不会缩放图像。

小提琴

在较新的浏览器中，您可以使用background-size属性并执行：

#elementID {
    height: 200px; 
    width: 100%;
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
    background-size: 100% 100%;
}

小提琴

除此之外，常规图像是一种方法，但它不是真正的背景图像。