--- title: "How to Add a Parallax Image in WordPress?" url: https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/ date: 2024-12-09 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "When everything on a page moves at exactly the same speed, the page feels flat. Parallax moves an image at a slightly different rate from the text beside it, which..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Parallax-Image-in-WordPress_-1024x519.jpg word_count: 606 --- # How to Add a Parallax Image in WordPress? ## Key Takeaways - Nexter Blocks Pro renders Scroll Parallax for the Advanced Image block, while the free plugin shows the toggle but changes nothing on the page. - Advanced Image uses Move Scroll (X) and Move Scroll (Y), with defaults of 120 and 0, so the out-of-the-box effect slides horizontally instead of vertically. - Scroll Parallax starts with an offset and eases back as the image crosses the viewport, with measured examples moving from 120 to 116, 84, and 52 pixels on X. - Troubleshooting points to a long enough scrolling page, because short pages have no scrolling for the effect to follow and are the most common reason parallax looks broken. When everything on a page moves at exactly the same speed, the page feels flat. Parallax moves an image at a slightly different rate from the text beside it, which reads as depth. *For every Advanced Image setting in one place, see the [Advanced Image block guide](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/) ## Before You Start - **Edition:** **Pro** — the block itself is free, but **Scroll Parallax** only renders with Nexter Blocks Pro. On the free plugin the toggle is there and switching it on changes nothing on the page.- **Block to enable:** Advanced Image, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your image in the Media Library**, at a size large enough for where it will sit. ## Steps - Add the **Advanced Image** block to your page and click **Design from Scratch**. - In the **Content** panel, upload or choose your image, then set **Image Size** and **Alignment**. ![The Content panel with Image Size and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/advimg-image.webp) - Open **Special Options** and switch on **Scroll Parallax**. ![Scroll Parallax on, with Move Scroll (X) and Move Scroll (Y)](https://nexterwp.com/wp-content/uploads/2026/09/advimg-parallax.webp) - Set **Move Scroll (X)** for sideways drift and **Move Scroll (Y)** for vertical. The defaults are 120 and 0. - Publish and scroll the image through the screen. > ***The default drift is sideways, not up and down.** Move Scroll (X) starts at 120 and Move Scroll (Y) at 0, so out of the box the image slides horizontally. For the vertical parallax most people picture, set X to 0 and give Y a value.* ## How It Behaves - **The image starts offset and eases back to its resting place** as it crosses the screen. Measured with the defaults: while the image was still below the fold it sat at 120 pixels off to the side, then moved to 116, 84 and 52 as the page scrolled.- **Both axes work the same way.** With X at 0 and Y at 200, the vertical offset eased from 200 to 193, 140 and 86 over the same scroll.- **Nothing moves until the image is near the screen.** The drift is tied to its position in the viewport, not to the page's total scroll.- A bigger number means a more obvious drift. Values in the low hundreds are enough; large ones leave the image visibly out of place while the reader approaches it. ## Limitations - **Pro only.** On the free plugin the toggle does nothing — no parallax markup is added.- **The page must be long enough to scroll.** Test on a page long enough to actually scroll. On a short page there is no scrolling for the effect to respond to, and a working setting looks broken. This is the single most common reason parallax looks broken.- The image is offset before the reader reaches it, so a large value can push it out of its column or leave a visible gap.- Readers who have asked their system to reduce motion still see the movement.- Movement on every scroll costs a little performance. A handful of parallax images on one page is plenty. ## Troubleshooting ### Nothing moves Check the page actually scrolls — on a short page there is no scrolling for the effect to follow. Then check you are on Pro, and that **Move Scroll (X)** and **(Y)** are not both 0. ### It moves sideways and I wanted it to move up and down That is the default. Set **Move Scroll (X)** to 0 and give **Move Scroll (Y)** a value instead. ### The image sits off to one side before I scroll to it That is the starting offset, and it is the value you set. Use a smaller number. ### It jumps rather than drifting The value is large relative to how far the image travels through the screen. Reduce it. ## Related Docs - [Advanced Image block: all settings](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/)- [Image reveal animation on scroll](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/)- [Scroll an image on hover](https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/) ## Frequently Asked Questions **Q: Why isn't the parallax effect showing on my WordPress image?** A: The usual blocker is that the Advanced Image block from Nexter Blocks is not installed or activated. The tutorial says this block is required before the Scroll Parallax toggle will do anything. Once the image is added and Scroll Parallax is enabled in Special Options, the movement should appear as you scroll. If nothing changes, the problem is usually setup, not the image itself. **Q: What do I need before adding a parallax image in WordPress?** A: The key requirement is the Advanced Image block from Nexter Blocks, and it has to be installed and activated first. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this block as part of its suite. Without that block active, the Scroll Parallax option described in the tutorial will not be available. **Q: Can I add a parallax image with just a normal WordPress image block?** A: This tutorial uses the Advanced Image block from Nexter Blocks, not a basic image block. The parallax effect is tied to the block’s Special Options tab and its Scroll Parallax toggle, plus the Move Scroll X and Y controls. That means the effect depends on this specific block setup rather than a plain image upload alone. **Q: How do I control how strong the parallax movement looks?** A: The movement is adjusted with the Move Scroll (X) and Move Scroll (Y) sections. Those controls matter because they change how far the image shifts horizontally and vertically while scrolling, which directly affects how noticeable the depth effect feels. Smaller movement keeps it subtle, while larger movement makes it more obvious on scroll. **Q: Where can I see the Advanced Image block used for parallax?** A: The tutorial points to a live example through the LIVE BLOCK LINK and also links to the feature overview at [click here](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/). That’s useful if you want to compare how the effect behaves before building it into your own page. The live block reference is [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/).