Descrição
Desktop browsers render background-attachment: fixed beautifully — the classic parallax effect where the content scrolls over a still background. Mobile browsers don’t: iOS ignores the fixed attachment and paints the image against the element itself, so a tall section with background-size: cover shows up as a hugely stretched, blurry texture. Android is inconsistent at best.
OXP Mobile Fixed Background repairs this automatically. On touch devices it detects every element with a fixed background image, removes the broken background, and re-creates it on an invisible layer with the exact dimensions of the screen, fixed to the viewport and clipped to the element’s box. The result is what background-attachment: fixed was always supposed to look like — on any theme, with no configuration.
Features
- Plug and play. Activate the plugin and you are done. There is no settings page, no options, nothing to configure.
- Lightweight. One small JavaScript file with zero dependencies, loaded in the footer. No frontend CSS. On desktop the script exits on its first line.
- Versatile. Works with any theme or page builder: detection runs on the browser’s computed styles, so it catches backgrounds set by stylesheets, inline styles, or builders alike. Multiple background layers are handled individually — only the fixed image layers are migrated; gradients, colors and scrolling layers stay untouched.
- Respects your markup. Your elements are never wrapped, moved, or reordered. The only additions are one invisible background layer inside the affected element and the CSS needed to clip it.
- Dynamic content covered. Sections injected after page load (sliders, AJAX content, popups) are detected and fixed too.
- Desktop untouched. Where the native effect already works, the plugin does absolutely nothing.
Instalação
- Upload the
oxp-mobile-fixed-backgroundfolder to/wp-content/plugins/. - Activate the plugin from the Plugins menu.
- That’s it — check your fixed-background sections on a phone or tablet.
FAQ
-
Does it have any settings?
-
No. The plugin is intentionally plug and play: activate it and every fixed background on your site renders correctly on touch devices.
-
How does it work?
-
On touch devices, a small script finds elements whose computed style uses
background-attachment: fixedwith a background image. It removes those image layers from the element and re-creates them on an invisible viewport-sized fixed layer inside the element, clipped to the element’s box withclip-path: inset(0). Visually, the background is painted at the exact size of the screen and stays still while the content scrolls — the true fixed-background effect. -
Will it slow down my site?
-
No. The script is tiny, has no dependencies, loads in the footer, and performs a single scan when the page loads (plus a very cheap watch for content added later). On non-touch devices it exits immediately.
-
Can I exclude a specific element?
-
Yes. Add the
data-oxpmfb-skipattribute to the element and the plugin will leave it alone. -
Why is one of my sections not fixed?
-
If the element (or one of its ancestors) uses a CSS transform, filter, or perspective, fixed positioning cannot work inside it — that is a browser rule, not a plugin limitation. The plugin detects this and leaves those elements untouched rather than making them worse.
-
That’s because it’s not needed. Just activate the plugin and it will be already working.
Avaliações
There are no reviews for this plugin.
Contribuidores e desenvolvedores
“OXP Mobile Fixed Background” é um software com código aberto. As seguintes pessoas contribuíram para este plugin.
Contribuidores
Traduzir “OXP Mobile Fixed Background” para o seu idioma.
Interessado no desenvolvimento?
Navegue pelo código, dê uma olhada no repositório SVN ou assine o registro de desenvolvimento via RSS.
Registro de alterações
1.0.0
- Automatic repair of
background-attachment: fixedon touch devices: fixed
image layers are migrated to an invisible viewport-sized fixed layer clipped
to the element, restoring the true parallax look on mobile. - Per-layer handling of multiple backgrounds (gradients and scrolling layers
stay on the element). - Dynamic content support: elements injected after page load are fixed too.
- Developer escape hatch:
data-oxpmfb-skipexcludes an element. - Dismissible welcome notice; no settings, no options — plug and play.