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.

Answer 2

Try:

background-size: 100% 100%; 

first 100% is for the width and the second for the height. In your case you need the second set to 100%