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

Question

I'm making a page that will just display an SVG image, and here are the requirements: - the vector should take up the entire window - the vector should maintain its aspect ratio (defined in the SVG file itself) - the vector should crop/clip in order to prevent skewing The CSS... ``` body { background: url(/path/to/image.svg); background-size: cover; } ``` ...works almost perfectly except that when the browser window becomes too narrow it tiles instead of cropping/clipping. Here are some screen shots (please ignore the artifacts left by dabblet): Here the window is close to the aspect ratio of the original image Here the window is "shorter" than the aspect ratio, and the image is cropping (as desired). Here the window is "narrower" than the aspect ratio, but instead of cropping, the image is tiling (undesired). Here are some thoughts that I had... - Could I change the SVG image in some way to prevent this from happening? - Could I markup/style the page to achieve the desired results? -…

Accepted Answer

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

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

Solution

Problem