CSS圖像不包括屏幕

我有一個網站，我有一個圖像，我想涵蓋我的整個屏幕寬度明智。CSS圖像不包括屏幕

這裏是我的CSS：

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

我的錯誤是，如果我調整瀏覽器窗口，所以它有一個滾動條，我向右滾動，我的形象停止某一個點之後繪製。看起來圖像正在繪製窗口的100％寬度，但如果某些窗口不可見並且僅通過使用滾動條，則該圖像不適用。

我該如何解決這個問題？這裏是我的問題的圖片：右

屏幕的邊緣滾動前：和

enter image description here

來源

2014-01-28 user3130731

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

：

enter image description here

屏幕的邊緣滾動後

.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屬性未設置爲寬度：100％;你的bootstrap.css正在覆蓋它。因此，您的標題元素延伸至html元素的100％，這不是屏幕寬度的100％。

查找當地的CSS和添加（或編輯）當前HTML &體規則：

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

確保它被裝載引導CSS（並因此覆蓋bootstrap.css）。

如果仍然使得問題，請嘗試使用

width:100% !important;

只是一般的知識，我建議您使用瀏覽器的內置檢查工具（或螢火蟲），以在屏幕上看到的元素，什麼是他們的動態的CSS值。

希望這會有所幫助！

來源

2014-01-28 21:04:03 Yani

嗯，我把你的代碼，但我仍然有相同的bug .. http://i.imgur.com/2UcRjBG.png – user3130731

@ user3130731你可以設置一個JSFiddle或發送一個鏈接到您的網站？ – Yani

www.rune-shadows.com是我的網站。要重新創建該錯誤，請在沒有底部滾動條的情況下調整屏幕大小，然後向右移動，頂部圖像將被切斷。 – user3130731

CSS圖像不包括屏幕

回答

相關問題