CSS图像不会覆盖屏幕

Question

我有一个网站，我有一个图像，我想覆盖整个屏幕宽度。

这是我的css：

            .header {
            background-image:url('images/header.png');
            height: 120px;
            width: 100%;
            position: absolute;
            left: 0;
            z-index:1;          
        }

我的错误是，如果我调整浏览器窗口的大小，使它有一个滚动条，我向右滚动，我的图像在某个点后停止绘制。看起来图像正在绘制100％宽度的窗口但如果某些窗口不可见则不适用，并且只能通过滚动条使用。

我该如何解决这个问题？这是我的问题图片：

向右滚动之前的屏幕边缘：

滚动后的屏幕边缘：

Answer 1

使用background-size:cover;和background-repeat:no-repeat;

.header {
        background-image:url('images/header.png');
        background-size:cover;
        background-repeat:no-repeat;
        height: 120px;
        width: 100%;
        position: absolute;
        left: 0;
        z-index:1;          
    }

目前，您并没有告诉背景图像“拉伸”，因此它会保持固定在原始尺寸中。

您还有另一个问题 - 您的html css属性未设置为width：100％;你的bootstrap.css正在覆盖它。 因此，您的标题元素会延伸到100％的html元素，这不是屏幕宽度的100％。

找到您当地的CSS并添加（或编辑）当前的html＆amp;身体规则：

html,body {
    width:100%;
    margin:0;
    padding:0;
}

确保它在bootstrap css之后加载（因此覆盖bootstrap.css）。

如果仍有问题，请尝试使用

width:100% !important;

仅仅为了一般知识，我建议使用浏览器的内置检查工具（或FireBug）来查看屏幕上的元素以及它们的动态css值。

希望这有帮助！