Easy Elementor Background Fixed on Mobile (100% Working)
CSS Course ➜
CSS Course Chapters

Easy Elementor Background Fixed on Mobile (100% Working)

Check out our CSS Course, made especially for Elementor users.

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.

Code for sections and columns:

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

Code for containers

@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;
}
}

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:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

58 Responses

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

      1. You can give the background a color and the background overlay a transparency to have the same effect! 😉

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

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

  5. 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!

      3. Hi there, I'm using containers but this doesn't work, my background is finally showing properly on mobile but it's not fixed.

        Have tested on Chrome and Safari on iphone.

        Thanks!

      4. Hey Pageant!

        Do you have a URL I can inspect to see what might be the issue?

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

      4. 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!

  9. 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?

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

  12. Hello,
    This tutorial is great and well-done! Everything worked as intended until the last bit with the script to make it work on iPads/iPhones. When added in an html div, nothing changes.

    I know a bit about html/css, but nothing with php. After trying a few solutions (plug-ins to add the script in the header), i tried php checkers, all saying there's a problem in the 1st line (excluding ).

    The page I'm working on is https://reno.se-agency.fr/fixed-image-example/

    Can you help me please?

    1. Hey Hugo!

      I'm sorry I didn't look at your page earlier. The code works on iPad and iPhones out of the box, the part with the <script> code is only required to prevent a bug on screen orientation change... it's not required for the sticky background to work!

  14. For sure? I can't believe this. I've tested it with sections and columns and it works fine, but it does not work with containers.

    1. Hey Maxime! I figured out that you already did post a code for containers in the comments. That works – awesome!
      But please put this code in the article on top. I guess most people won't find it in the comments.Thank you!

  15. Hello everyone! I also have a problem, I copied and attached the code for the fixed background in Custom CSS and the code in the HTML element in the page to which I attached the link below, everything works fine until I try to zoom on the ipad/iphone and in any instead of the page, I would try to zoom, the background image from the second section appears. Below I leave you a YouTube link where I made a screen recording with the problem. Can someone help me please? Thank you very much!

    Page with problem:
    https://aqua-prestige.com/home/

    Youtube link:
    https://www.youtube.com/shorts/_aXnpURW064

    1. Greetings!

      This looks like a render bug from the Safari / iOS browser. You will have to write to Tim Cook to get that one fixed! I won't be able to help here.

      Cheers!

      1. I did some research and I also discovered that it doesn't work only on iOS, I tried other browsers on iOS and I still have the same problem, but on Android I see that everything works correctly, I don't know what to do or what options I have , I'll probably talk to Tim Cook 😂 ... Thanks for the answer and for all the effort you put in!

  16. Help! Thank you so much for the article. It worked perfectly and this was exactly the fix I was looking for, however, the fixed image is cropped to the left on mobile. Is there a way to maybe make it less cropped or do you have any other advice?

    Thank you so much for your help!

    1. Greetings Mendy!

      The image is set to 'cover', meaning it will occupy the full space available, and part of it will be cropped. This is normal, expected, and essentially what we want... otherwise the entire space would not be occupied and it would not look very good.

      For some image, the cropping that occurs isn't quite positioned as we wish, so we have the background-position CSS property for that. In Elementor, it's called Position, under your Background Overlay settings. Change it to position your image differently.

      Cheers!

  17. Hello - I have noticed a bug on zooming in.

    The effect works perfectly on mobile, however, when you zoom in (with your fingers), the whole viewport grays outs. And it happens if you zoom in anywhere on the page. So if you have this fixed effect on a page and for example, you zoom in on a photo or a feature anywhere on that page, the viewport goes gray. When you zoom back out the screen goes back to normal.

    Do you know a fix for this that?

    1. Greetings!

      Like I wrote to someone else above:

      This looks like a render bug from the Safari / iOS browser. You will have to write to Tim Cook to get that one fixed! I won't be able to help here.

      Sorry!

  18. Hi Maxime!! I've been applying this to many sites and it works perfectly.
    Recently I tried on other site but when I add the code to the section (I use the section code) the image turns into blank and there's no effect..

    I did exactly the same as the tutorial and as on the other pages but for I don't know what reason it doesn't works.

    Did you experience something similar?
    Thanks!

    1. Hey Gabriel!

      I don't know what would be the issue here... I haven't seen this or heard of this bug...

      If you can share a page with me where you have the bug (and also let me know where to look for it)

      Cheers!

      2. Hey Gabriel!

        Everything seems to work as it should. The issue in that particular case is that you don't have any image set as background overlay for that section!

        When I copy pasted the CSS from the section below, the image was added, and it was fixed as expected.

        If in Elementor you do have a background image set as overlay, then it's a CSS issue.. try WP > Elementor > Tools > Regenerate CSS

        Cheers!

    1. Hi Maxime, sorry to bother again! I've been trying all but still the problem persists. Even on other pages on the same site.
      I copy the code on other sites and works, it seems something related to the site itself.
      Do you know what could it be?

      Thanks.

  20. Hello and thanks for this solution with background fixed images on iPad.. The tutorial fixed the iPad's landscape mode now showing full size image but on portrait mode and mobile mode the image is overflow. I also added the script code in an html element at the end of the page but it does't work unfortunately..

    Did I do something wrong?

    Here's the page I'm working on: https://manuelopezgomez.com/presskit-test/

    Best,
    Maje

    1. Hey Maje,

      I think you need to set your background overlay's position to :center center, in the Elementor editor's settings.

      1. Hi Maxime,

        It worked. Actually, I didn't need to put the optional html code and it's running fine in all my devices so far. Thank you very much!

Leave a Reply

Become the CSS ninja your were meant to be with our CSS course for Elementor users!

CSS Course For Elementor Users
Easy Elementor Background Fixed on Mobile (100% Working)

Awesome new Elementor designs, right in your inbox.

Just fill in your email.

Navigation

Quick links

Social

Make a donation:
Created by
Easy Elementor Background Fixed on Mobile (100% Working)