html - Trying to stretch background to 100% height

Question

I am trying to create a full page div (with 100% width & height). But in firefox it is not stretching fully. Here's my code:-

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

I've tried a lot,but I don't know what's wrong.

Answer 1

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

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

Answer 2

确保您设置的高度html, body。

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

html, body {
    height:100%;
}

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

这是一个例子：http: //jsfiddle.net/ewF8M/