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会覆盖它。 因此，您的标头元素延伸到html元素的100％，而不是屏幕宽度的100％。

找到您的本地CSS并添加（或编辑）当前的html和body规则：

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

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

如果仍然出现问题，请尝试使用

width:100% !important;

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

希望这可以帮助！