33

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?

user1539137
  • 369
  • 1
  • 4
  • 5
  • I don't think so. You can resize (stretch/squish) `` tags, though: the solution may involve putting an `` in the background, positioned absolutely and such. – KRyan Oct 02 '12 at 16:42
  • 1
    This might be a good place to look: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – MikeB Oct 02 '12 at 16:42
  • 1
    Also, pretty sure you're not supposed to put quotes around your `url`s like that. – KRyan Oct 02 '12 at 16:43

3 Answers3

52

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.

mr_mariusz
  • 644
  • 7
  • 12
32

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%

LihO
  • 41,190
  • 11
  • 99
  • 167
Erind Dollaku
  • 369
  • 2
  • 8
0

Thank you for bringing up this question. Below is what worked for me

background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;
Dharman
  • 30,962
  • 25
  • 85
  • 135
Nadine Amanda
  • 1
  • 1