Easy Elementor Background Fixed on Mobile (100% Working)

Easy Elementor Background Fixed on Mobile (100% Working)

Just launched! Checkout the CSS Course for Elementor users.

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.

You can also check out these related premium tutorials:

Elementor Cross Fade Images on Scroll Design

Elementor Split Scroll Design

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.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

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

Checkout the Elementor Addon Finder directly

Comments

29 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.

      1. - Using containers
        - CSS ID for my container =“sticky-background-image”
        - Set my Image for the container on the background overlay
        - Tried adding the custom CSS (you added in comments for using containers) to the “sticky-background-image” container
        - getting a red “x” error saying “Unknown @ rule: @supports.” On line 1

        Is there some setting I’m missing, should I be adding the CSS to the container or making a separate HTML block somewhere and adding it there? (Full disclosure, c# pro but CSS newb 🙂

        Thanks

      2. Hey Bryan!

        You can safely ignore this. It's because Elementor use a very old CSS linter, that's quite inaccurate.

        The CSS will work regardless of the red X.

  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;
          pointer-events:none;
      }
      }
      

      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;
          pointer-events:none;
      }
      }
      
      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!

  5. I really like your solution, but I am wondering whether it can cause links from not working because of this. I made use of your solution on https://new-limits.nl/. There are several linked elements which do not link on iOs (at least on my iPad and that of my customer) eg the three images halfway the page, the titles below those mages (Vitaliteit, Personal training and Revalidatie) and the buttons at the bottom of these columns. Also the text link Contact which is below that part is not working.

    1. Hey Frans!

      In your code, you didn't copy that line :

      pointer-events:none;

      It's required! Otherwise it will have the bug you mention. Add it and it should fix this.

      Cheers!

      Maxime

    1. Yes actually this same technique would work fine with background videos. Just need to change the selectors...

      However, on mobile, background videos aren't reliable and don't always autoplay. Something to keep in mind...

      1. I do not see the result either in the PC version or in the mobile version

      2. You might have an error elsewhere in this case, such as broken CSS upstream... I would need to see the URL.

      3. The background image overlay is what is sticky, with this code. So your sticky background image needs to be set as background image overlay, not as background image.

        The code is there, and working, you just need to switch the image to the background overlay!

  6. it worked, but the result is that my landingpage looks like it's completely covered by a transparent color that wasn't there before, what's the solution?

  7. Fixes image in place but my transparent sections are appearing grey and not showing the image behind them. How can I resolve this?

Leave a Reply

Just launched

CSS Course For Elementor Users

Offer incredible value to your clients by becoming a CSS ninja!