2

I've done this almost a million times but it's been a while and I cannot get it to work for some reason.

My HTML file consists of nothing but an empty body tag. Here's my css: 

body{
    height: 100%; 
    width: 100%; 
    -webkit-font-smoothing: antialiased;
    background-image: image-url("background.jpg");
    background-size: cover; 
    background-repeat: no-repeat; 
}

The width stretches/shrinks to fit the window perfectly, but the height refuses to. Here's what happens when I shrink the browser window:

background

What am I doing wrong?

Sam D20
  • 2,535
  • 5
  • 25
  • 43
  • The width and height are not necessary from experience. Have you a jsfiddle link? – filype Apr 25 '15 at 02:28
  • 1
    are you sure that your body covers all the page? – nicholaswmin Apr 25 '15 at 02:31
  • @NicholasKyriakides that appears to be the problem. I just put a border on the body and it is only spanning a fraction of the page. How can I expand it to the size of the browser window without filling it with content since apparently `height: 100%` is not working. – Sam D20 Apr 25 '15 at 02:32
  • @ByronS percentage height only works if the parent element has a height specified. Try `html { height: 100%; }`. – hungerstar Apr 25 '15 at 02:33

1 Answers1

1

Use 

html, 
body {
  height: 100%;
}

The body does not cover the rest of your page.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167