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

Question

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.)

Answer 1

My suggestion would be to attempt using the 'transform' CSS attribute. You can then give a value of 'scale()' with a number passed into the parentheses. The higher the number, the more the zoomed the image will appear. The good news is that you can use decimals too. This will allow you to zoom the image just a bit at a time. This would look a bit something like this...

#zoom-in {
   background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
   transform: scale(1.2);
}

You can see an example of this being done here https://css-tricks.com/zooming-background-images/