Hey everyone, wondering if anyone could help out with this!
Having this issue with image banners on website pages when in mobile mode, particularly the About Us page, where the image appears way too zoomed in, and it looks pretty awful.
The animation is set to Fixed background position, as we love the look as you scroll down the page, and it looks fantastic on desktop mode, but on mobile, it doesn’t look great at all!
Would anyone have a solution to solve this mobile issue?
This is a common pain point—what looks sleek on desktop with a fixed background often breaks on mobile because of how mobile browsers handle background-attachment: fixed. Many devices either don’t support it well or force the image to stretch/zoom unnaturally, which is why your banner looks off.
Two solid ways to approach it:
Conditional styling for mobile: You can use CSS media queries to disable the fixed background on smaller screens. For example:
@media only screen and (max-width: 768px) {
.your-banner-class {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
}
This keeps the parallax effect on desktop, but ensures a clean, centered image on mobile.
Alternative background method: Instead of a fixed background, some stores use a parallax script or app that mimics the effect without relying on background-attachment: fixed. That way, it renders properly on both desktop and mobile.
So the core idea is: keep the aesthetic for desktop, but override it on mobile for usability.
Is this quite clear and enlightening, or would you like me to properly guide you step by step with the exact code placement in your theme files?
You’re absolutely right! if you want that same smooth “scroll-style look” on both desktop and mobile, then method 2 is the way to go. The reason is that background-attachment: fixed isn’t reliably supported on mobile browsers, so CSS alone won’t force it to behave properly.
Instead, what’s usually done is to use a parallax script (or app) that recreates the effect by moving the background image with JavaScript as you scroll, instead of relying on the limited CSS property. The advantage is that it looks consistent across all devices.
Here’s the flow in simple terms:
Keep your current background image setup.
Apply a parallax library/script (for example, simpleParallax.js or similar).
That script will take over the scrolling behavior, making sure the background moves dynamically, even on mobile.
So yes, with this method you can have the effect across both desktop and mobile.
Would you like me to break it down with a step-by-step on adding a lightweight parallax script into your theme, or would you prefer a quick ready-to-use code snippet that you can drop in?
You can add two image banner sections: one for mobile and one for desktop. This allows you to use two different images for each device. Then, add customized CSS below to hide the mobile section on desktop and vice versa.
