Hello awesome people!
In the Hero Section, I have a div (White Shirts); inside that, I have a div (Glass Window). Both divs have the same background image—one with white shirts and one with colored shirts fixed to the bottom.
This trick only works with the images on div backgrounds, not image elements.
.white-shirts {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
height: 100vh;
background-image: url(white shirts);
background-position: 50% 100%;
background-size: auto 95vh;
background-repeat: no-repeat;
background-attachment: fixed;
.glass-window {
position: absolute;
overflow: hidden;
width: 136vw;
height: 136vw;
border-radius: 100vw;
background-image: url(‘colored shirts’);
background-position: 50% 100%;
background-size: auto 95vh;
background-repeat: no-repeat;
background-attachment: fixed;
I animate the height and width of from 0vw - 136vw, and it works pretty well:
But not on iOS. The background picture in does not stay fixed to the viewport, but rather the div it’s in. I read somewhere that iOS doesn’t do well with things fixed to the bottom.
Does anyone know about this and/or a workaround?
I need the background image in to stay fixed to the bottom.
I appreciate anyone’s help. 
Here is my site Read-Only: https://preview.webflow.com/preview/teesngeeks?utm_medium=preview_link&utm_source=designer&utm_content=teesngeeks&preview=9516097bad9e8251b01ba75eefe31b8d&workflow=preview