Question

I know that I can use cover or contain value for the ‘background-size’ property, but is this possible to scale a background by window height?

I’ve tried

background-size: auto contain

background-size: cover contain

both didn’t work.

Answer 1

The contain and cover keywords are meant to be used by themselves; you can’t use them for just the width or just the height of a background image, i.e. you can’t put two of them together. Furthermore, these two values will always scale the image according to its aspect ratio.

If you mean to preserve the image’s aspect ratio, while keeping the entire image visible (contained) within its box, just specify contain by itself:

background-size: contain;

If you mean to preserve only the background image’s original width, and stretch its height along with its containing box, without preserving the image’s aspect ratio, you will have to specify its width in pixels and 100% for its height.

So for a background image that’s 200 pixels wide, you’ll use:

background-size: 200px 100%;

Don’t forget to give your image an appropriate background-position and background-repeat.