CSS - Background image stretch horizontally and re

问题:

Using background-size: cover I am able to make the background stretch to fit the full width of the page.

Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page.

Is there any way to combine these two effects? Unfortunately they don't seem to work together (at least in Chrome). It appears that 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 height of the image) I can accomplish the above, but it skews the background image as it's only stretched in one direction. Is there a way to keep it scaling proportionally?

回答1:

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