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