尝试将背景拉伸到 100% 高度答案

【问题标题】：Trying to stretch background to 100% height尝试将背景拉伸到 100% 高度
【发布时间】：2013-05-10 09:38:26
【问题描述】：

我正在尝试创建一个完整的页面 div（具有 100% 的宽度和高度）。但在 Firefox 中，它并没有完全伸展。这是我的代码：-

div{
    background:url('image.jpg')no-repeat fixed;
    background-size:cover;
 }

我试过很多，但我不知道哪里出了问题。

【问题讨论】：

标签： html css

【解决方案1】：

实际上，您的 CSS 本身并没有什么问题，但为了使其正常工作，您需要（不幸的是）添加浏览器前缀
尝试添加

 div{
    background:url('image.jpg')no-repeat fixed;
    background-size:cover;
    -moz-background-size:cover;
  }

【讨论】：

【解决方案2】：

请务必设置html, body 的高度。

默认情况下，html 和 body 元素不会占据窗口的整个高度。您必须明确设置 html, body 的高度以强制它们跨越窗口的整个高度。

html, body {
    height:100%;
}

通过强制html, body 占据窗口的整个高度，然后将div { width:100%; height:100%; } 作为body 元素的子元素，您可以确保div 将拉伸到窗口的100%宽度和高度。

【讨论】：