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值是多少。

希望這可以幫助！