CSS Does the background image stretch horizontally and repeat vertically?

Question

Using background-size: cover, I can stretch the background to fit the full width of the page.

Using repeat-y, I can do a background repeat or tile vertically, the entire height of the page.

Is there a way to combine these two effects? Unfortunately, they don't seem to work together (at least in Chrome). It looks like I can either stretch in both directions with background-size: cover, or not stretch in the x direction, but repeat in the y direction.

Edit: using background-size: 100% Npx(where N is the image height), I can do the above, but it distorts the background image since it stretches in only one direction. Is there a way to scale down proportionally?

Answer 1

Instead of a cover, use background-size: 100% auto;to enlarge the background image to the full width of the browser, keeping the aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y;to alternate it vertically.