How to prevent background from "squishing" during keyframe animation

HTML-CSS
1

I am trying to create a page where my background slowly zooms in and out.
Everything is fine other than the responsiveness. When I decrease the width of the window, the bg “squishes” is there a way for it to simply zoom.
I need the background-attachment: fixed for the bg to fill the entire page regardless of how the window is manipulated.
Example:
https://codepen.io/bongotw/pen/wvwGbWz

2

Should be using transforms, not width/height else you’ll get jank, w/h aren’t good properties to animate:

from {
  transform: scale(1);
}
to {
  transform: scale(1.2);
}

For scaling

And if you want the background to always retain aspect ratio and fill the entire space

background-size: cover;
3

Thanks for the reply.
I tried using transform earlier, but it only made the box div move. The background also doesn’t zoom at all if the window’s width is adjusted to its smallest.
I also already included cover.

4

Ah, I see, I couldn’t really see it on my phone but that makes more sense on a desktop. You’re changing the background size from cover, where it retains aspect ratio, to 100% 100% (then 120% 120%), where you’re just making it the size of the container. Don’t scale the body, put a div or whatever in the body, make it the same size, scale that.

body
  elementWithBgImage
  restOfTheStuff