CODEWITHSUNDEEP
css
Mike Harrison
Mike Harrison

Reputation: 776

Stretch CSS Background Image

Possibly a but unusual - I am looking to stretch a background image in css to cover the whole div. I don't want any of the image cropped (so can't use cover as I currently have) - I want the background image to distort to fill the div no matter the size / aspect ratio of the div.

I have a codepen here: http://codepen.io/mikehdesign/pen/ezOrmB

My current code is:

HTML:

<div class="background"></div>

CSS:

div.background {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(https://unsplash.it/800/400);
}

Ideally I would like to do this without Javascript

Upvotes: 0

Views: 996

Answers (2)

user4345221
user4345221

Reputation:

ok but then its getting stretched not proportionally:

div.background {
  width: 300px;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url(https://unsplash.it/800/400);
}

cheers

Upvotes: 1

hypeJunction
hypeJunction

Reputation: 361

Set your background size to 100% for both dimensions:

background-size: 100% 100%;

Upvotes: 0

Related Questions