Make the Elementor background-attachement:fixed setting work, even for Mobile devices such as iPhones.
Here is what we are creating an example sites.
Setup your background image
At the section container add Background image in Background Overlay‘ tab and do NOT set attachment to ‘fixed’.
We use code below will do it.
Add class has-bg-fixed to the section.
If you want to make background fixed on the top of content like an example sites then add margin-top to the inner section.
Add this Custom CSS
/* Background image fixed on mobile */
@supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) {
.has-bg-fixed{
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.has-bg-fixed::before,
.has-bg-fixed .elementor-background-overlay{
position: fixed !important;
top:0;
left:0;
height:100vh;
pointer-events:none;
}
}