Easy Elementor Background Fixed on Mobile (100% Working)
Get Premium

Easy Elementor Background Fixed on Mobile (100% Working)

Element.How also offers premium tutorials! Check them here:

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.

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:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Background Fixed on Mobile (100% Working) tutorial 
 * Found at this URL https://element.how/elementor-background-fixed-mobile/ 
 */ 
</script>

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

Code for containers

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Background Fixed on Mobile (100% Working) tutorial 
 * Found at this URL https://element.how/elementor-background-fixed-mobile/ 
 */ 
</script>

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> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Background Fixed on Mobile (100% Working) tutorial 
 * Found at this URL https://element.how/elementor-background-fixed-mobile/ 
 */ 
</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.

Easy Elementor Background Fixed on Mobile (100% Working)

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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

      1. Yea it's definitely a bug. Inserting the code on the front end makes everything work as it should... so it's a issue with the proper CSS not being generated for some reason.

        Sorry I can't troubleshoots everyone's problems though! If you need paid help, reach out to me.

        Cheers!

  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!

      1. 💘 THANKS a lot Maxime ♥️ Finally works - helped me a lot since I am going nuts with the container-bunsiness 😉

  22. When I enter the container code into the CSS, the red warning triangle shows up telling me that @supports is an unknown rule. Does anyone have any idea what I need to do in order to make it work?

    1. Hey Kerstin!

      You can just ignore that. It's from the CSS validator Elementor uses, which is outdated.

      The CSS will work regardless of the warning.

      Cheers!

  23. Hi, I randomly ended up here, and this seems to be great. I wondered if it only works with Elementor Pro, or can I add it to the "HTML widget" from the basic Elementor version? I don't know about coding, yet I've done a lot with tutorials; it's just that I don't get to make this one work. And should I add it to each section where I have the background overlayed pictured or on one single separate section box?

    I really appreciate any help you can provide.

    1. SORRY ! it WORKS PERFECTLY !
      i missed the part that i need to setup the photo as a background overlay AND NOT as a normal background.

  26. Hello,

    I have added this css on my page but in my preview version of the updates it looks like nothing has changed. The site is still in build mode so can only use the preview option.

    I had the image as background but added it as background overlay too. Used the CSS code and also got the unknown @ rule : @supports - which I note you said above it should still work.

    Using Elementor Pro

    Thanks in advance!

  27. Working on a site here using this code:
    staging.aj-photography.co.uk

    Works perfectly for one section, but if I try to use it twice on the same page, the second one is bugging on iPad/iPhone devices only, jumping to a fixed full screen which then can't be scrolled back up or down.

    The first instance worked perfectly, and both work on other devices except iPad!

    1. For readers: Ste actually found a fix for this (adding overflow:hidden to the parent element) and I updated the code in the tutorial with this fix.

      Thanks Ste!

  28. Hi Maxime!

    This is awesome thanks! Is it possible to have the inner containers a visible overflow? I tried giving the inner container the following code, but this did not work

    selector {
    overflow: visible !important;
    }

      1. Hi Maxime,

        Thanks for your response.

        Here's a link of the website ( https://82606.jouw-nieuwe-website.nl/ ) the password of the page is ccreative.

        The inner container I've mentioned is the red block in the second section that overflows into the third section. What I would like is that the block is completely visible instead of having a hidden overflow.

        Thank you in advance for your response!

        Kind regards,

        Nick

      2. Hey Nick!

        Sorry that won't be possible... I had to add "overflow:hidden" to the parent container to prevent a bug on iOS (see a few comments above).

        You could just remove the "overflow:hidden", but then the bug will be back.

        Instead, you will have to either :

        1. Go with another layout for this part or
        2. Create a container below that one, set it to 100vh height and top margin of -100vh. Then set your inner container in that container that's now sitting on top of the fixed background container.

        Cheers!

        Maxime

  29. I used this code and it was working fine but suddenly I have a 1px transparent line at the top of my upper shape divider and its driving me crazy!

    2. Greetings Gabriel,

      Sorry I won't really be able to help with this... It's a render bug from iOS, and for some reason, on some pages, it's more buggy than others.

      Sometimes on iOS everything will work just fine, but other time this kind of bug will show up... you will have to take it up with Tim Cook.

      Cheers!

      1. Máxime, thank you for your explanation.
        So, it's random? I mean on some pages can happen and in others not? Even on the same domain?

        Thanks again.

      2. Hey Gabriel,

        I think it's probably not really "random", to be exact... I think it probably has to do with DOM complexity, DOM size and
        DOM depth. (in other words on much 'stuff' there is on the page)

        But I can't say with certainty, and we can't say exactly when a page becomes too complex... we would need to test it out, and see when it starts breaking.

        Cheers!

  31. The problem, it seems, is that this doesn't just fix the background image... it also fixes the containers themselves, so that nothing scrolls anymore. 🙁
    I added both of the main two lines of code recommended here... is there a way to make it so that everything on the page, all the containers, scroll up past the fixed background image!?

    1. Greetings!

      What you are describing isn't normal, maybe there is an error somewhere. Do you have your test page URL that I could check?

      Cheers!

      2. Actually, because that was freezing up every page across my whole live site, I decided to disable for the time being until I can figure out why it's doing that... I really wish this worked! If I could show you how it freezes just one page that would be fine, but it does so across all pages so I can't make an example...
        (I tried to add the code to JUST the individual page via the HTML element but even with the "<style></style>" around the code from above that didn't do anything to the page...)

        Here's a video of the issue: https://youtu.be/T2_cLKkfyUc
        (Sorry no voice over because my mic doesn't work on this computer... but when it's showing it not moving just know I'm technically scrolling with the mouse and it's not doing anything)

    3. Greetings!

      Okay I understand the issue, you can't use the CSS code there in the Site Settings > Global CSS!

      We are using the keyword "selector" in the CSS, so it can only be added to the container element > Advanced > Custom CSS field. It is targeted to that specific container that has the background image.

      I hope this helps!

      1. Ok, that makes a lot of sense! Right now the background image is set as background in the site settings, which does make it global. I understand you are saying the only way I could make this CSS work for the background image would be for me to make it a background via a container on a specific page.
        Is there a way to make the background image work as a background for the whole page if it is only a container?

Leave a Reply

Easy Elementor Background Fixed on Mobile (100% Working)

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2024 Element How
Privacy Policy | Terms & Conditions