# How to prevent background from "squishing" during keyframe animation

**URL:** <https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [August 16, 2019, 8:02am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952 "2019-08-16T08:02:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bongotw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bongotw/32/119247_2.png) [@bongotw](https://forum.freecodecamp.org/u/bongotw)\
**Post date:** [August 16, 2019, 8:02am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952/1 "2019-08-16T08:02:59Z")

</div>

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](https://codepen.io/bongotw/pen/wvwGbWz)

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [August 16, 2019, 8:20am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952/2 "2019-08-16T08:20:18Z")

</div>

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

```auto
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

```auto
background-size: cover;

```

---

<div class="post-metadata">

**Author:** ![bongotw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bongotw/32/119247_2.png) [@bongotw](https://forum.freecodecamp.org/u/bongotw)\
**Post date:** [August 16, 2019, 10:04am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952/3 "2019-08-16T10:04:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [August 16, 2019, 10:21am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952/4 "2019-08-16T10:21:25Z")

</div>

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.

```auto
body
  elementWithBgImage
  restOfTheStuff

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 11:27am UTC](https://forum.freecodecamp.org/t/how-to-prevent-background-from-squishing-during-keyframe-animation/305952/5 "2021-03-09T11:27:15Z")

</div>