CODEWITHSUNDEEP
css
user1539137
user1539137

Reputation: 369

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?

Upvotes: 33

Views: 57056

Answers (3)

Nadine Amanda
Nadine Amanda

Reputation: 1

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;

Upvotes: 0

mr_mariusz
mr_mariusz

Reputation: 664

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.

Upvotes: 54

Erind Dollaku
Erind Dollaku

Reputation: 369

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%

Upvotes: 32

Related Questions