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?
• I would prefer to keep in the realm of HTML/CSS, but if Javascript is needed, then so-be-it.

Here's the dabblet that I was working with... http://dabblet.com/gist/6033198

Answer 1

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

Answer 2

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.