Easy Elementor Background Fixed on Mobile (100% Working)

Easy Elementor Background Fixed on Mobile (100% Working)

Table of Contents

Make the Elementor background-attachement setting work, even for Mobile devices such as iPhones.

Actually, because background-attachement:fixed is blocked at the browser level on mobile, we need to use an alternative technique, that will give the exact same result.

The only inconvenience is that we are using the Background Overlay tab to add our background image, instead of Background tab. So if you needed both of them, you might need to edit your image to add your overlay directly to it.

Here is what we are creating.

Let's get started.

First, setup your background image in the Elementor section's settings

Clear and reset everything under 'Background'. You only this to be enabled (the little brush icon), for the Background Overlay option to show up.

Easy Elementor Background Fixed on Mobile (100% Working) 1

In the 'Background Overlay' tab, your settings should be the following.

Importantly, do NOT set attachment to 'fixed'. The code will take care of that.

Set opacity, CSS filters and Blend mode as you wish.

Easy Elementor Background Fixed on Mobile (100% Working) 2

Then, go under Advanced > Custom CSS, and add this CSS

This is to make the Elementor background image fixed, to replicate the background-attachment:fixed; behaviour.

@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) ) {
selector{
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
selector .elementor-background-overlay{
    position: fixed;
    top:0;
    left:0;
    height:100vh;
    pointer-events:none;
}
}

Elementor Free Users: learn how to add CSS to Elementor free and how to deal with the 'selector' keyword.

Optionally, add this code in an HTML element, on the same page

This is to avoid a rare bug where on the newest iPads (and iPhones?) when the user changes its screen orientation, the images will overflow on the entire page.

I think it's rare enough for users to be changing their screen orientation while they are currently browsing a web page...

I would suggest adding this only if you have the kind of page where users are likely to rotate their devices (like if you have videos on your page).

<script>
window.addEventListener("orientationchange", function(event) {
document.querySelectorAll('*').forEach(e => {
if (window.getComputedStyle(e).position === 'fixed') {
e.style.position = "relative";
setTimeout(() => (e.style.position = "fixed"), 300);
}
});
});
</script>

Finally, enjoy your new Elementor fixed background on mobile design!

You should now have a fully working fixed background image on mobile, as well as desktop and tablets!

Let me know if everything worked well for you.

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

12 Responses

  1. Hey thanks, great tutorial!

    But what if we have a background overlay set up for increasing darkness of the current background image. will this code work for background-image?

    Thanks in advance!

    1. Hey Hamza!

      Yes that's an inconvenient of this method. The background overlay is already being used. You will need CSS to create your own background overlay, or edit your image to have it included in the image file.

  2. Hi! great work, but there seems to be a side effect on the Navigation button of the menu when used on iPads/iPhones. Do you have any idea?

    Thanks Martin

    1. Hey Martin!

      Could you be more precise? Would you have a screenshot or screen recording of the issue? If yes, email it to me. Thank you.

  3. Hey Maxime!
    When setting up a web site with Elementor we used a menu screen in the header of all pages which in itself includes the menu structure form 'Appearance' in the WP dashboard. And this structure includes some sub menus that link to the separate pages.

    The standard 'fixed' feature for background works for desktops, and in the tablet/mobile view still scrolls. In the latter the menu is shown as a drop down with the three-strip button.

    That is when your feature comes in and then fixing the background picture also works on tablets and mobiles.
    However, when applying your feature the menu unfolds on Android systems but not on Safari systems (iPad, iPhone). When clicking on the three-strip button in Safari, nothing happens and we can not change to a different page.

    Thank you for your help

    1. Hey Maxime!

      great work. Your recent change made it perfect also on the Safari side - on any iPhone and iPad it will be a happy viewing experience!

      Thanks Martin

      1. Thanks Martin!

        For viewers: I updated the code to fix these issues Martin discovered on iPhones and iPads.

  4. Is this still working? It doesn't seem to do anything for me :(, except moving the image to the background because the "edit section" top bar disappears, but the scrolling doesn't have the effect. Idk what I did wrong, I pasted the code in a html widget, in between the style tags and replaced the "selector" with the CSS class that I gave to my section with the image. Is there something I'm missing? I'm not very good at coding but this seemed the easiest and friendliest tutorial I found

    1. Hey!

      Maybe you are using the new containers elements? I just added instructions for these in the tutorial.

      Example code if you are using normal section, with class name "sticky-background-image".

      @supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%) ) {
      .sticky-background-image{
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      }
      .sticky-background-image .elementor-background-overlay{
      position: fixed;
      top:0;
      left:0;
      height:100vh;
      }
      }

      Here is the same, for a container

      @supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%) ) {
      .sticky-background-image{
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      }
      .sticky-background-image::before{
      position: fixed;
      top:0;
      left:0;
      height:100vh;
      }
      }

      1. Containers? Umm I don't think so, I'm just adding an inner section into the Elementor section and from there.

        Edit: Oh wait it worked now!! I erased the previous section and tried it again from start and it worked, even the style options work, that's exactly what I wanted, to show the image in full-size with size:contain and also the fixed background. Thank you so much Maxime!

Leave a Reply