How to handle background image size shrink animation to “cover” properly in css?

Question

I have the following div:

.bg {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;