lundi 15 juillet 2019

CSS: How to zoom in the background-image only slightly

Everything I'm looking up either talks about animations or how to completely zoom in

Ex.

#zoomOut {
    width: 200px;
    height: 200px;
    background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
    background-size: cover;
    bottom: 0;
}
<div id="zoomOut">
</div>

or zoom out the background image.

Ex.

#zoomIn {
    width: 200px;
    height: 200px;
    background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
    
}
<div id="zoomIn">
</div>

I want the image to cover the background, but be zoomed in only a little bit.

Ex.(Run the first snippet and view the difference in the images.)

enter image description here

Aucun commentaire:

Enregistrer un commentaire