css - Vertically stretch background image

Question

I am trying to figure out how to stretch a background image vertically. I am using CSS3 with 3 images in the following way:

background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top

Now I want to stretch these images vertically to that they extend all the way to the bottom. Is there a way to do this?

Answer 1

I'm late to the party here, but this is what worked for me:

background-size: auto 100%;

This will fit the image vertically and let the width do whatever it needs to do (i think it repeats by default). You can also set:

background-repeat: no-repeat;

for it to not repeat the image in the horizontal direction.