The Issue
If your fixed background image is not working in Safari on iPhone or iPad, you may notice that the background does not behave as expected.
When the Background Attachment option is set to Fixed, the image may:
- Appear zoomed out
- Look blurred
- Be resized incorrectly
- Scroll instead of staying fixed
- Fail to create a parallax effect
This issue commonly affects Safari on iOS and iPadOS and may appear as a broken fixed background or parallax effect on mobile Apple devices.
The Cause
Safari on iOS and iPadOS does not fully support the CSS property background-attachment: fixed.
Because of this browser limitation, fixed background images and parallax effects may not function properly on iPhone and iPad devices. This is a known Safari limitation and is not caused by Elementor.
The Solution
If your fixed background is not working on iPhone or iPad, use one of the following alternatives.
Use Motion Effects instead of Fixed attachment (Recommended)
If you are using the Fixed background attachment to create a parallax scrolling effect, switch to Motion Effects for better compatibility with Safari.
To enable Motion Effects:
- Edit the element that contains the background image.
- Go to Advanced.
- Open Motion Effects.
- Enable Scrolling Effects.
- Adjust the Vertical Scroll settings to recreate the parallax effect.
Motion Effects provide a smoother and more reliable parallax experience across browsers, including Safari on iOS.
Disable Fixed attachment on mobile
If a parallax effect is not required, you can fix the issue by disabling the Fixed background attachment.
To change the background attachment:
- Edit the element that contains the background image.
- Go to Style > Background.
- Set Attachment to Default instead of Fixed.
Using the Default attachment setting ensures the background displays correctly across Safari and other mobile browsers.
Additional Information
Because this issue is caused by a Safari limitation, similar fixed background problems may also occur in other themes or page builders that rely on background-attachment: fixed.
If the background still does not display correctly after making these changes, check with your hosting provider to ensure caching or optimization settings are not interfering with background rendering.
