14

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?

user35358
  • 331
  • 2
  • 3
  • 9

1 Answers1

37

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.

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • 1
    Since the background-size x is 100% width it shouldn't repeat-x so you actually don't need to specify repeat-y, just let it default.... but it doesn't hurt. – zgood Dec 07 '16 at 19:26
  • 3
    for those searching for what I was -- the `auto` attribute above is specifying a height, so if you put in a fixed height like in the code `background-size: 100% 150px;` then your image will stretch horizontally while maintaining the 150px dimension. – Daniel Thompson Jan 22 '18 at 07:26
  • 3
    In my case it is not working, I change it to background-size: 100% calc(100%), and it worked for me – Rishi0405 Nov 29 '18 at 10:09
  • As @Rishi0405 comments, it doesn't work if the image is higher horizontally than the screen. I needed to stretch it, so calc(100%) worked fine – Faliorn Sep 01 '22 at 11:27