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.

this might help: http://stackoverflow.com/questions/15687778/how-to-use-css-media-query-to-scale-background-image-to-viewing-window — greener, May 15 '13 at 17:32

score 0 · Accepted Answer · answered May 15 '13 at 17:34

0

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;
  }

answered May 15 '13 at 17:34

lazyprogrammer

633
9
26

Indeed you are a lazyprogrammer :P you should add other cross browser properties to your answers too.. – Mr. Alien May 15 '13 at 17:38
This is just wrong, Firefox supports this CSS property without prefix since version 4: http://caniuse.com/background-img-opts – null May 15 '13 at 17:38

kyle.stearns · Answer 2 · 2013-05-15T17:43:48.113

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%; } 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/

Trying to stretch background to 100% height

2 Answers2