CSS background using "background-size: cover" doesn't fit the full height

After some trial-and-error, this is what I found.

Adding (to the original CSS):

html {
  height: 100%
}

delivered exactly what I was looking for in the original spec.

Additionally, if I wanted the image to be center when it was cropped, I could use:

html { 
  background: url(path/to/image.jpg) no-repeat center center fixed; 
  background-size: cover;
}

Lastly, if I wanted it to be centered, always maintain the aspect ratio, but NOT be cropped (i.e., some whitespace is OK) then I could do:

body {
  background: url(/path/to/image.svg) no-repeat center center fixed;
  background-size: contain;
}

For me I had all other properties set except background-attachment:fixed. I had experienced the same issue on a site of mine for ages, one of the most elusive and infuriating bugs I've ever come across, but adding this to the html element seems to have finally solved it for me.

Tags:

Css

Svg