Vertically stretch background image
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?
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.
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%
上一篇: 尺寸：100％100％; 在Chrome中无法正常工作
下一篇: 垂直拉伸背景图像