全尺寸英雄背景不起作用答案

【问题标题】：Full-Size Hero-Background is not working全尺寸英雄背景不起作用
【发布时间】：2014-10-16 22:41:51
【问题描述】：

我想为我的英雄单位制作全尺寸背景。我使用了以下代码：

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/ 这个英雄单位还有一个全屏背景图像。就是这样，我也想拥有。

【问题讨论】：

将height: 100%; 和width: 100%; 也添加到html, body，并确保div.hero 不在另一个具有明确高度的元素中。
谢谢伙计！这有帮助。为更好地理解而做的小解释，为什么我以前没有工作？
这里有一篇小文章涵盖了这个主题：How do you set the height of an element to 100%?

标签： css twitter-bootstrap background fullscreen

【解决方案1】：

您必须为您的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

【讨论】：

【解决方案2】：

确保您的 html、正文高度和宽度为 100%。

【讨论】：