Why doesn't height work in CSS when I use percentages?

So, I am trying to set an image to开发者_如何学JAVA be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as

html{
  width:  100%;
  height: 100%;
}
img{
  width:   100%;
  height:  100%;
  z-index: 0%;
}

And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?

---

You also need to set height: 100% on body.

Going with your exact example, you could do:

html, body, img {
    width: 100%;
    height: 100%;
}

However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).

In that case, you should instead use one of the methods from here:

http://css-tricks.com/perfect-full-page-background-image/

---

That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.