使背景圖像填充屏幕，當前高度0px

我正在爲我的網站創建一個簡單的標題部分與一個大圖像。圖像應該從我的導航欄下方的屏幕填充到瀏覽器窗口的底部。目前它不顯示，並給它一個0px的高度。我可以看到它正在拉正確的圖像，但不知道爲什麼它沒有給它一個高度。使背景圖像填充屏幕，當前高度0px

這是我的html和css我正在使用。

<!-- banner --> 
    <div class="banner"> 
     <div class="welcome-message"> 
      <div class="wrap-info"> 
       <div class="information"> 
        <h1 class="animated fadeInDown">Test Content</h1> 
        <p class="animated fadeInUp">This is a test</p> 
       </div> 
      </div> 
     </div> 
    </div> 
<!-- banner--> 

.banner { 
    background: url(../images/photos/banner.jpg) no-repeat bottom center scroll; 
    background-color: #000 !important; 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    background-size: cover !important; 
    -o-background-size: cover !important; 
    width: 100%; 
    height: auto; 
}

來源

2015-11-03 pocockn

我們需要看到這個**不**工作診斷。你可以做一個演示或提供一個鏈接？而且，那些「重要」陳述可能是不必要的。 –

您可以提供一個問題的最小例子，例如在[JSFiddle]上（http://jsfiddle.net），所以人們更容易複製和分析它。 –

請參閱'height：auto'不會使其適應父級的'100％'高度。 – Jai

首先，你應該改變你的網頁的背景，而不是「.banner」類的背景。

所以下面的代碼添加到您的CSS樣式：

body { 
background: url(../images/photos/banner.jpg) no-repeat center center fixed; 
background-size: cover; 
background-position: 100% 150px; 
}

body { 
background: url("http://www.nps.gov/ner/stsp/images/5C74E407-1DD8-B71C-0E0994FC86420E86.jpg") no-repeat center center fixed; 
background-size: cover; 
background-color: #000 !important; 
-webkit-background-size: cover !important; 
-moz-background-size: cover !important; 
background-size: cover !important; 
-o-background-size: cover !important; 
background-position: 100% 150px; 
}

要使背景開始後的資產淨值簡單地調整「背景位置：100％150像素;」意思是100％的寬度和150px從頂部:) Heres a JSFIDDLE我用不同的圖片製作，因爲你沒有提供你正在使用的圖片。

來源

2015-11-03 12:20:11 MaartenPAC

優秀!!!馬騰 –

使背景圖像填充屏幕，當前高度0px

回答

相關問題