Elementor

Elementor – Parallax Section Background Image

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

UPDATE: Wednesday 12 July 2017

When Elementor updated to 1.5, the code presented on this page would cause a “jumping” effect when scrolling. However, user @cgdannie on the WordPress Elementor Support Forum posted this CSS snippet that cures the problem and provides the smooth parallax effect once more. Thanks!

NOTE: This is CSS and can go in Dashboard > Appearance > Customize > Additional CSS or in Simple CSS if you are using that plugin.

/* remove transition for objects with the class 'parallax' */
.parallax {
    transition: none !important;
}

This tutorial shows you how to add the parallax effect to an Elementor Section background image. As of this writing, Elementor does not offer this option so this is one way to achieve this effect.

Here is the code that you need to copy and paste into the Code Snippets “Snippet” as described in the video:

Note: Source of the code provided here is from Jeff S here:

https://wordpress.org/support/topic/parallax-in-elementor/#post-8331191

Don’t forget to add the parallax Class name in the Section’s Advanced tab.

function jquery_parallax() {

   ?>
    <script language="JavaScript" type="text/javascript">
    

;(function($) {

   'use strict'

    var testMobile;
    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

  var parallax = function() {
    testMobile = isMobile.any();
    if (testMobile == null) {
      $(".parallax").parallax("50%", 0.3);
    }
  };

  // Dom Ready
  $(function() {
    parallax();
   	});
})(jQuery);

/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: https://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
https://www.opensource.org/licenses/mit-license.php
https://www.gnu.org/licenses/gpl.html
*/
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);

    </script>
    <?php
  
}

if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}

73 thoughts on “Elementor – Parallax Section Background Image”

  1. Avatar

    Lyle, I love this parallax code. Thank you for sharing!

    I found an interesting issue and I’m hoping you can help me resolve it.

    I’ve built a simple portfolio site at ranoutof.ink and my home page has a parallax section in it. It works fine on my 13-inch MacBook Pro. But when I use the developer’s responsive design check tool in Safari and Chrome, an extra space is added at the top (and sometimes bottom) part of the parallax background image.

    [This section is either blank or contains the repetition of the image – depending on whether it’s set to repeat or no-repeat.]

    This happens only in certain resolutions, even though I think I use use a large enough image (1372 × 2020).

    Do you have any idea what might be causing this?

    Thank you in advance!

  2. Avatar

    Hi there! Thanks for posting this! It’s working on my page, but the parallax feels minimum, like it scrolls an inch then stops the motion effect as you continue to scroll.
    Any idea what could be effecting this?

    1. Avatar

      Hi Julius,
      I tried adjusting the .3 value that is shown in the code. A lower value, e.g. .1 slows it down and a larger one, .8 speeds it up. However, this also changes the vertical position of the content, so you may need to adjust that within Elementor or custom CSS.
      Cheers!
      Lyle

  3. Avatar

    Good night, i’m trying to use the code following the video but it gave me the next error:

    Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 1:

    DISEVAL – Use of eval is forbidden
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    1. Avatar

      Hi Elio,
      Sounds as thought the code was not copied correctly. Try it again and review it against the what is on the site to make sure it’s the same with no extra spaces, etc.
      Cheers!
      Lyle

      1. Avatar

        I’m having the same issue. I’ve copied everything correctly, I’ve checked it about 10 times. Any ideas as to what could be wrong?

        1. Avatar

          Hi Camille,
          Could be a couple of things:
          1. did you add parallax as the CSS class name to that section?
          2. do you have enough content UNDER that section so that you are able to see the effect when you scroll? You will not see the effect without sufficient content below the section that has this enabled.
          Cheers!
          Lyle

  4. Avatar

    Hi Lyle-
    Thanks for sharing; the code works like a charm! Almost on all browsers.. 🙁
    Safari and Chrome checked out, but on Firefox 62.0.2 (64bit) I’ve noticed a weird lag on my background image as I scroll down. It looks as if the parallax is “lagging behind” the scroll for about a second. Any idea how to fix it?
    I’ve already changed the code snippet value from 0.3 to 0.8 for faster response. Seems like it has no effect on FF…
    Please help…. :/

    -mike

    1. Avatar

      Hi Mike,
      You’re welcome and good to hear that it works on ‘almost’ all browsers 🙂
      Did you add the CSS that is shown at the top of the page in the Update section? This cured the problem that it sounds like you are having.
      Cheers!
      Lyle

      1. Avatar

        I did now. Sloppy me…
        You were so right. It worked!
        Can’t thank you enough, Lyle!
        Does ‘buy Sniffle Valve coffee’ really do what it say it does? Bcs I’d love to show my appreciation somehow…

        1. Avatar

          Right on, Mike!
          And you bet it buys me coffee … there’s a 24 hour Tim Horton’s across the street from my place! 🙂

      2. Avatar

        Hey there,
        I seem to be having the same problem. Where do I insert the code that you have mentioned to get rid of the problem? I don’t get what you mean by the ‘update’ section

        1. Avatar

          Hi Vinayek,
          The Update section it at the top of the page where is says “UPDATE: Wednesday 12 July 2017” :
          As that section mentions, it is a CSS snippet so you can put it in Dashboard > Appearance > Customize > Additional CSS.
          Cheers!
          Lyle

  5. Avatar

    Hi Lyle,
    Thanks for sharing the code and tutorial about BG parallax effects, very very cool and useful , but I have a delicate question to ask you and you understand,
    if it is better to use the child theme or the code snippet ?, I do not trust to insert code on a plugin that goes to write on the php templates of the main theme.

    I use the child theme and how can I implement the code on the child theme? or can I use both? both the child and the code snippet?

    I await your answer thank you very much

    Gian

    1. Avatar

      Hi Gian,
      There is no issue with using Code Snippets for this as the plugin stores the snippets in the database and does not modify any files whatsoever. This is where I put all of my snippets of this sort.
      Do NOT use both; one place or the other.
      Cheers!
      Lyle

    1. Avatar

      Hi Gavin,
      Where exactly are you saving when this occurs?
      If you have copied the code, lines 1 through 65 and pasted it into a new Code Snippets snippet and then selected Run Everywhere then Save and Activate it should work.
      Not sure where or how that URL is getting generated.
      Cheers!
      Lyle

  6. Avatar

    Hi SV

    where in the body of the main code do i add

    /* remove transtion for for objects with the class ‘parallax’ */
    .parallax {
    transition: none !important;
    }

    ?

    please can u help

    1. Avatar

      Hi Gihan,
      As you’ll note in the text above the code, it is a CSS snippet so it can go in Dashboard > Appearance > Customize > Additional CSS.
      Cheers!
      Lyle

  7. Avatar

    Hey, this has been really helpful. Thank you so much. But also, are there any more codes that we might use to add a little animation or if you know any website that provides such kind of animation codes. Like for example, background image floating in from a side or something like this.

    1. Avatar

      Hi Arpit,
      You’re welcome 🙂
      I’m not aware of any plugin or site that would provide for that sort of animation. If I come across any, I’ll post back here.
      Cheers!
      Lyle

  8. Avatar

    This is great. I’m just not able to get it to work on mobile for some reason. It works beautifully on desktop (and it appears to work when viewing mobile version in Elementor) but the effect isn’t happening in mobile safari and mobile chrome. Any ideas why?

    1. Avatar

      Hi Dave,
      This is the default behavior for parallax on mobile. Not sure why, just is. There are some third party plugins which fix this but at the moment, I can’t recall what they are. A Google search for WordPress Elementor parallax mobile turns up a lot of suggestions.
      Cheers!
      Lyle

  9. Avatar

    I have that dreaded jump in my parallax effect after installing the code. (Which was super cool and easy, thanks to your video!) I tried to install the snippet with the fix, but I don’t know where to put it. It gave me an error with the “.” in line 2. How and where do I install the fix? Thanks in advance for helping a newbie!

    1. Avatar

      Hi Amy,
      I apologize for not making it more obvious that the “jump” code type is CSS and does not go where the other code goes. I will update the site to this effect.
      That CSS can go in Dashboard > Appearance > Customize > Additional CSS.
      Cheers!
      Lyle

    1. Avatar

      Hi Danial,
      That is done in Elementor. Edit Section > Background > Background type: Image > Attachment: Fixed.
      Cheers!
      Lyle

  10. Avatar

    //Elementor v2.3.4
    //Elementor Pro v2.2.3

    Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 60:

    Cannot redeclare jquery_parallax() (previously declared in /home/noq69k6efytv/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(355) : eval()’d code:49)
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    1. Avatar

      This error means that you have already have a snippet with this code. Verify that you are not making a duplicate 🙂
      Cheers!
      Lyle

  11. Avatar

    is there a way to adjust the starting vertical point in the image so that it’s not just showing the top of the image at first? I have an image that I want to use this for, but it’s showing just the tops of the heads starting out.

    1. Avatar

      Hi Jeffrey,
      In the Style tab for the Section > Background > Position you can change where the image is located, e.g. Center Center.
      Cheers!
      Lyle

      1. Avatar

        Hi Lyle, this is awesome, thanks a lot!
        The background positioning of the Elementor tab doesn’t seem to work here. I mean, it does move the image a little bit, but it seems to be (very) limited. That is: if I put Bottom Center for example, the starting point is just a few pixels below Top Center. Any clues on that?
        Thanks again!

        1. Avatar

          Hi Sergio,
          You could try to adjust the values here in the code provided – the % value and the 0.8 value.
          $(“.parallax”).parallax(“80%”, 0.8);
          Cheers!
          Lyle

          1. Avatar

            Hi, I tried changing the values, and the second parameter seems to effect the starting position of the background image (I ended up using -2), but the first parameter doesn’t seems to do anything that I can notice.
            I’m getting a situation where the background image scrolls off the section before the next section scrolls over it thereby showing the background colour. Any ideas?

            Many thanks
            Pete

          2. Avatar

            Hi Pete,
            Not really sure to be honest. As I mentioned in the comment where I mentioned this, adjusting the second value will alter the vertical position. Unfortunately, the person who provided the code is unavailable so I unable to ask him for assistance.
            Cheers!
            Lyle

  12. Avatar

    Works like a charm, thanks for posting!

    Might be worthwhile to also note that if you are using GeneratePress, you can add the snippet by creating a wp_head hook element (Elements>New>Hook, hook=wp_head).

    Works the same, and obviates the need for another plugin.

    Cheers!

  13. Avatar
    Iresh Madushanka

    Thank you very much for your tutorial. I have an issue, when I scroll there is a white space appearing in top how to get rid of that?
    Thanks in advance.

  14. Avatar

    Lyle thanks for your work on this. I hope there’s an easy fix for this: I’m using Elementor Pro, and when I add the Code Snippet plugin, my Elementor pages will not load for editing – I get the ‘Preview Could Not Be Loaded’ error. Yikes!

    1. Avatar

      Hi Greg,
      You’re welcome 🙂
      Yikes indeed! That is very strange. Do you mean this happens by just having the Code Snippets plugin active without any snippets?
      Cheers!
      Lyle

  15. Avatar

    Hi Lyle,

    First, thanks for this wonderful tutorial. I’m trying to add a video background on my site, but the parallax won’t work on it. Is there a way to do it?

    Thank you again!

    1. Avatar

      Hi Kelvin,
      You’re welcome for the tutorial 🙂 Not to sure about the parallax not working on a video background as I have not yet tried it.
      I will do some testing and report back.
      Cheers!
      Lyle

  16. Avatar

    Hi Lyle,
    I’ve watched several of your videos…. you’re efforts are much appreciated.
    Wondering if you could hare your thoughts on this issue.
    I entered the original code snippet a few months ago and just entered the Additional CSS code, but it’s still jumpy. Watch what i mean…
    https://www.screencast.com/t/dVwhMGUqKzoh

    Here is what I entered into the Additional CSS
    https://prntscr.com/mvkxr8

    Not sure if the original code has changed since I pasted it 5 months ago…or if it’s something else? Any thoughts?

    Thx
    Migz

    1. Avatar
      Sniffle Valve

      Hi Migz,
      I just tried this on a local test site that is using the latest Elementor (2.5.3) and Elementor Pro (2.4.7) and there is no jumping as in your screencast.
      Your CSS is correct. The only things I can think of is a conflict with some of your other custom CSS or the theme. I am using Astra for the test site.
      Cheers!
      Lyle

  17. Avatar

    I’ve discovered a slight bug with this. If you have an Elementor Accordion in a section above a parallax section and you toggle open one of the accordions, the parallax section below becomes messed up causing the image to repeat.

    Can anyone else confirm this, any solutions?

    1. Avatar

      Hi Andrew,
      I just tried this and do not get that behavior. The parallax section displays normally. Could be something else interfering.
      Cheers!
      Lyle

  18. Avatar

    Hi sniffle,

    Thanks so much for the fix. I’ve followed your video like a wide-eyed puppy on pcp but there appears to be an issue. When I preview the site the parallax seems a little jumpy (not quite a smooth scroll). I’ve looked at the preview on the latest chrome and firefox and they both look a little jumpy. I’ve checked the code that I placed in the snippet and the code I placed in customiser. Have you heard of this issue? Would appreciate your help. I’ll put some money in your Tim Hortons fund.

    Thanks,

    Phil

    1. Avatar

      Hi Phil,
      You’re welcome for the fix 🙂
      I recently tried this on a local test site with the latest E, E Pro, Astra, Astra Pro and I didn’t notice any “jumpy” issues; appeared very smooth.
      Could be a cache thing for the CSS code or perhaps the theme?
      Cheers!
      Lyle

    1. Avatar

      Hi Andrew,
      Unfortunately, not with this code. However the latest version of Elementor Pro and it’s motion effects has a parallax effect that works on mobile.
      Cheers!
      Lyle

  19. Avatar

    Hi there, your video was excellent, but I am not sure if I already have too many plugins, etc. conflicting to make this not work. I have Elementor Pro, using with Hueman theme. I had a little SiteOrigin CSS plugin installed, which I deactived. I just pasted line 1-65 in a few times, with Parallax in name and hit Save & Activate. I get the 404 Error. Is there anything I am supposed to change in the code? I am using a page template from Hueman in my home page.

    1. Avatar
      Sniffle Valve

      Hi Christie,
      It should work by just pasting in the code into a Code Snippet snippet and select run everywhere and save and activate.
      Be sure to add parallax as the Class Name for the section you want this to apply to. Should make no difference if it is a child or parent theme.
      Cheers!
      Lyle

  20. Avatar

    Really wish this worked for me. I’m using the latest version of Elementor, followed all the steps, copy and pasted code correctly, hit run snippet everywhere, and after hitting “save changes and activate”, i get an “Oops! That page can’t be found” on the next screen. Note, I have all these other plugins installed:
    Code Snippets – 2.13.3
    Elementor – 2.6.8
    Elementor Pro – 2.6.2
    Google Analytics for WordPress by MonsterInsights – 7.7.1
    Instagram Feed – 1.12.2
    Mortgage Calculators WP – 1.37
    Toolbar Extras – 1.4.4
    WPForms Lite – 1.5.4.2
    Akismet Anti-Spam – 4.1.2

    Please let me know if you can troubleshoot. Thanks.

    1. Avatar

      Hi Eugene,
      A couple of things:
      – make sure you added parallax as the class name for the section in the advanced tab
      – try resaving your permalinks
      Cheers!
      Lyle

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top