Q:

background-size on the html tag

My question is regarding the background-size CSS property on the html tag.
Why doesn't the following work,
html {
background: url(bg.jpg) no-repeat;
background-size: 1500px 1500px;
}

Whereas this works,
html {
background: url(bg.jpg) no-repeat;
height: 1500px;
}

A:

They are two completely different things: background-size denotes the size of the background image which gets put onto the element, while the element itself can have different dimensions (height 0 will hide it, so no background shown). height is the opposite, it specifies the element height, which is not related to the background size you put on it.
See the three examples here (two as I described above, and one to represent the proper way):

html {
  background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat right top;
  background-size: 200px 200px;
  }
div {
  background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat;
  display: inline-block;
  width: 100px;
  border: 1px solid black;
}
#a {
  height: 0;
  background-size: 100px 100px;
}
#b {
  height: 100px;
  background-size: auto;
}
#c {
  height: 100px;
  background-size: 100px 100px;
}
<html>

<body>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</body>

</html>

Also, I've added the background (and size) to the html element itself, and as you see, it behaves the same way (Mario shrinks to 200x200 without a problem).

Read more here: 
background-size

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

height

The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

