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:


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() {

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:
!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);


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

Similar Posts


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

    1. Hi Andras,

      Good to hear that you like it ๐Ÿ™‚
      I use Screenfly to check various devices and your site looks and fine using it.
      It looks OK too in responsive design in Chrome dev tools on Win 10, so perhaps a Mac OS thing?

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

  3. Literally within a minute I found a piece of cut off code in mine on accident, doh! Thank you for your service sir!

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

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

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

  5. 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…. :/


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

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

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


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

  7. I am having a problem. I followed the video religiously but when I try and save it gives me a 404 error as it tries to go to the following page https://www.upliftlearning.onlinepersona.co.za/wp-admin/admin.php?page=add-snippet . The initial part of the address is obviously the site I am working on but the remainder?

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

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

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

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

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

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

  12. //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. This error means that you have already have a snippet with this code. Verify that you are not making a duplicate ๐Ÿ™‚

  13. 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. Hi Jeffrey,
      In the Style tab for the Section > Background > Position you can change where the image is located, e.g. Center Center.

      1. 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. 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);

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

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

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


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

    1. Hi Iresh,
      You’re welcome ๐Ÿ™‚
      Not too sure about the white space without seeing the site.

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

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

  18. 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…

    Here is what I entered into the Additional CSS

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


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

  19. 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. Hi Andrew,
      I just tried this and do not get that behavior. The parallax section displays normally. Could be something else interfering.

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



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

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

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

  22. 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 –
    Akismet Anti-Spam – 4.1.2

    Please let me know if you can troubleshoot. Thanks.

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

  23. Hello Sniffle – Outstanding workaround for this!
    Unfortunately, it does not work for me very well.
    At first, I experienced the “Jumpy” effect, but that was beautifully corrected after adding the CSS code that you provided-
    -That is, UNTIL I noticed that there is still a “jump”, but ONLY when I move my mouse to the section either below or above the section with the parallax background. (This happens in both the editor, AND the actual site URL).

    Check it out (The pic of the guy with the black T-shirt): https://womdentalmarketing.com

    I was so close! I would be eternally grateful if you could help me out.

    Thank you in advance…

    1. Hi Michael,
      Thank you for the compliment ๐Ÿ™‚
      Unfortunately, I cannot check out the link you provided because Sucuri has indicated that this site has been blacklisted. https://sitecheck.sucuri.net/results/https/womdentalmarketing.com

      Additionally, it also shows that you are using Essential Addons as well as OceanWP addons, both of which are known to cause issues with Elementor and which could be the source of this behavior.

  24. Hey Lyle!

    Thank you so much for this wonderful tutorial. However, this isn’t working for me! When I copy in the code (I have retried this many times and it definitely seems to be correct) I click “save changes and activate” and it brings me to a page that says “This page doesn’t seem to exist” – any ideas? ๐Ÿ™‚

    1. Hi Jen,
      I just tried this on a local test site and it’s working fine. Make sure that parallax has been added as a class name in the section’s advanced tab.

      1. Hi Jack,
        As I mentioned to Jen, it worked fine for me on a local test site. Could be a plugin conflict.

  25. I canยดt seem to get it to parallax for a section that contains a video. Is it not possible to parallax with video as the content of the section, in Elementor? What is the difference between the section holding an image, and holding another type of media, like a video? I go to the section, I go to additional css and I put in ยจparallaxยจ (yes, I have the snippits plugin downloaded, yes I named the CSS class ยจparallaxยจ and it is activated, all working properly). But it wonยดt parallax on my videos! Any answers for me? Thanks a lot!

    1. Hi Vesta,
      You are correct in that this does not work with video, nor does Elementor Pro’s Motion Effects. There may be another plugin that does so but I am not aware of any.

  26. Hi Lyle, how do I stop the the string of menu in a exactly point? I’m explain better: I would scrolling in vertical and in a exactly point a string of menu must stopped but the background image keep on scrolling in vertical.
    I hope I explained myself ๐Ÿ™‚
    Thank you.

    1. Hi Diego,
      You might take a look at this plugin which offers vertical scroll: https://wordpress.org/plugins/premium-addons-for-elementor/

  27. To prevent the container size from changing height while scrolling on tablets and mobile, add these background properties to the CSS. For some reason Elementor says “Note: Attachment Fixed works only on desktop.”

    /* remove transition for objects with the class ‘parallax’ */
    .parallax {
    transition: none !important;
    background-repeat: no-repeat;
    background-attachment: fixed;

  28. Hi, thank you for all your hard work creating these great tutorials. Would you be aware of any solutions for creating the parallax effect for video backgrounds?
    Thanks and best regards,

      1. Thanks for the reply Lyle, after further research I found a plugin that is supposed to do it, both images and video, haven’t tried it yet though, and another one that states it will do it:

        Advanced WordPress Backgrounds + the plug-in Jet Elements, from Crocoblock.

        Be safe!

  29. Hi, I just implemented this and it works beautifully, thanks again for your instructions, it was the missing piece for my front page, saved me several hours (days!) of time and headaches, very much appreciated!

      1. Hi. I have a problem. On the page, when I scroll down, this photo has a parallax effect, but when it reaches the top foot of the page, the effect stops. I don’t know if I expressed myself well, but I recorded a video.


        1. Could be that there is not enough height set to the parallax image section.
          Also, this code and video were from an older version of Elementor and I have not tested it with the latest.

  30. Hi, so glad I came across this of many hours trying!!!! THANK YOU!!

    Working great on desktop….
    Does the parallax effect not work on mobile devices?


    1. You’re welcome Ian ๐Ÿ™‚
      Unfortunately, this code does not work on mobile. Keep in mind that this is quite old and the latest version of Elementor may support it.

Leave a Reply

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