Resize background image in div using css [duplicate]
Answer
You have multiple options:
-
background-size: 100% 100%;
- image gets stretched (aspect ratio may be preserved, depending on browser) -
background-size: contain;
- image is stretched without cutting it while preserving aspect ratio -
background-size: cover;
- image is completely covering the element while preserving aspect ratio (image can be cut off)
/edit: And now, there is even more: https://alligator.io/css/cropping-images-object-fit
Demo on Codepen
Update 2017: Preview
Here are screenshots for some browsers to show their differences.
Chrome
Firefox
Edge
IE11
Takeaway Message
background-size: 100% 100%;
produces the least predictable result.
Resources
- https://alligator.io/css/cropping-images-object-fit
i would recommend using this:
background-repeat:no-repeat;
background-image: url(your file location here);
background-size:cover;(will only work with css3)
hope it helps :D
And if this doesnt support your needs just say it: i can make a jquery for multibrowser support.