CODEWITHSUNDEEP
htmlcsscarousel
BFalcon
BFalcon

Reputation: 345

background-size: cover; Can we reverse clip direction?

The CSS3 rule 'background-size: cover;' starts at the top left of a div and stretches the background image in aspect ratio so that it dynamically covers the width of the div.

For a particular image I have, it would look a lot better at higher width screens if 'background-size: cover;' started the image from the bottom left of the div (div has fixed height) and covered up and to the right. This way the sky of the image would not be the only thing visible on wide monitors.

After some trial and research I have come up empty. Is this possible?

Thank you

Upvotes: 1

Views: 1071

Answers (1)

Asons
Asons

Reputation: 87303

Yes, by using the position bottom left, well described at MDN

div {
  height: 300px;
  background: url('http://lorempixel.com/500/500/nature/4') no-repeat bottom left;
  background-size: cover;
}
<div></div>

Looks like this with the default top left

div {
  height: 300px;
  background: url('http://lorempixel.com/500/500/nature/4') no-repeat top left;
  background-size: cover;
}
<div></div>

Upvotes: 4

Related Questions