OXP Mobile Fixed Background

توضیحات

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.

نصب

  1. Upload the oxp-mobile-fixed-background folder to /wp-content/plugins/.
  2. Activate the plugin from the Plugins menu.
  3. That’s it — check your fixed-background sections on a phone or tablet.

سوالات متداول

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: fixed with 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 with clip-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-skip attribute 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.

I can´t find the admin menu section

That’s because it’s not needed. Just activate the plugin and it will be already working.

نقد و بررسی‌ها

نقد و بررسی‌ای برای این افزونه یافت نشد.

توسعه دهندگان و همکاران

“OXP Mobile Fixed Background” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند.

مشارکت کنندگان

ترجمه “OXP Mobile Fixed Background” به زبان شما.

علاقه‌ مند به توسعه هستید؟

کد را مرور کنید، مخزن SVN را بررسی کنید، یا از طریق RSS در گزارش توسعه مشترک شوید.

گزارش تغییرات

1.0.0

  • Automatic repair of background-attachment: fixed on 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-skip excludes an element.
  • Dismissible welcome notice; no settings, no options — plug and play.