试图将背景拉伸到100％的高度

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

Actually there's nothing wrong with your CSS as such, but in order for it to work properly you need to(unfortunately) add browser prefix
try adding

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

Answer 2

Be sure you set the height of html, body .

By default, the html and body elements do not take up the entire height of the window. You have to explicitly set the height of html, body to force them to span the entire height of the window.

html, body {
    height:100%;
}

By forcing the html, body to take up the entire height of the window and then placing the div { width:100%; height:100%; } div { width:100%; height:100%; } div { width:100%; height:100%; } as a child of the body element you can ensure that the div will stretch to 100% of the window's width and height.

Here's an example: http://jsfiddle.net/ewF8M/