全尺寸英雄背景不起作用

我想爲我的英雄單元設置一個完整尺寸的背景。我用下面的代碼：全尺寸英雄背景不起作用

HTML

<div class="hero"> 
    <h1> hello world </h1> 
</div>

CSS

.hero { 
    background:url(../images/header1.png) no-repeat center center; 
    background-size:cover; 
    min-height:100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
}

與我的解決方案的問題：背景僅是高達我的標題是。但大小不應該取決於內容，它應該取決於觀衆的決議。

這是一個完美的例子：https://www.zirtual.com/這個英雄單位也有一個全屏背景圖像。這就是我想要的。

來源

2014-10-16 user3644606

添加'高度：100％;'和'寬度：100％;''到HTML，body'以及並確保'格。英雄「不在另一個明確高度的元素。 – insertusernamehere 2014-10-16 13:23:22

謝謝隊友！這有幫助。爲了更好的理解，爲什麼我之前沒有工作的小解釋？ – user3644606 2014-10-16 13:27:44

以下是一篇介紹此主題的文章：[如何將元素的高度設置爲100％？]（http://webdesign.about.com/od/csstutorials/f/set-css-height-100- percent.htm） – insertusernamehere 2014-10-16 13:33:53

確保你的html，身高和身高都是100％。

來源

2014-10-16 13:49:44 Sattar

您必須爲您的body和html標記以及您的.hero類別設置100%高度。

像這樣：

body, html { 
    height: 100%; 
} 

.hero { 
    height: 100%; 
    background: url("../images/header1.png") no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

JSFiddle Demo

來源

2014-10-16 14:01:12

全尺寸英雄背景不起作用

回答

相關問題