Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Parallax Effect to Any WordPress Theme

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a parallax effect to any WordPress theme.

Adding parallax effect to any WordPress theme

What is a Parallax Effect?

Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the background images and makes them feel interactive.

Parallax effect can be used on landing pages, longform content, sales pages, or homepage of a business website. It is a great way to highlight different sections on a lengthy page.

Many premium WordPress themes come with built-in parallax effect on their homepage. You can also use parallax effect in most WordPress page builder plugins as well.

However, not all themes have a built-in parallax effect, and you may not want to use a page builder to create custom page layouts just for a parallax effect.

Let’s take a look at how to easily add parallax background effect to any WordPress theme.

Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin

This method doesn’t require you to add any code to your WordPress theme. It is easier and recommended for most users.

First thing you need to do is install and activate the Advanced WordPress Backgrounds plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor.

WordPress advanced background button

Clicking on it will bring up a popup where you can change different settings for the background you want to add.

First, you need to select an image as your background type and then check the ‘stretch’ option.

Parallax background settings

Next, you need to click on the ‘Select Image’ button to upload or select an image you want to use. Make sure that you are using a large image otherwise it will appear pixelated.

After that you need to enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. The most commonly used parallax effect is scroll.

Click on the Insert button to continue.

The plugin will now add a shortcode inside your WordPress post editor. It will look something like this:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Your Content Here


Replace ‘Your content here’ with your own content and then save your page.

You can now visit your website to see it in action.

Parallax effect preview

Method 2: Add Parallax Effect to Any WordPress Theme with CSS

This method requires you to have a fair understanding of HTML / CSS as well as how WordPress themes work.

First, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting Media » Add New page.

After uploading the image, you need to copy the image URL by editing the image in WordPress media library.

Copy image URL

Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or child theme.

<div class="parallax">
<div class="parallax-content">

Your content goes here...


Next you need to add the following custom CSS to your WordPress theme.

.parallax {  
background-image: url("");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

.parallax-content { 
margin:0 auto;

Don’t forget to replace the background image URL with your own background image.

You can now save your changes and visit your website to see it in action.

Parallax effect added with CSS

Note: You may need to adjust CSS to work with your site’s layout.

We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the most wanted WordPress tips, tricks, and hacks.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

  1. Maybe I’m stupid but what should I insert under “your own content here” in the shortcode? Is the content the post or what?


    • You would likely want a sticky header for what it sounds like you’re wanting, otherwise, you would want to reach out to the support for your specific theme for that customization.


    • Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article :)


  2. Hello and thank your for this guide.
    Ive implemented Solution #2 on my site, its working great except for the fact that its not working on mobile. Is there a known issue with that?

    • Hi, I tried thesecoond code solution but itis not Responsive and gets dinged by google.
      I have tryed a few fixes, mostly using media breaks and messing with margins but cannot get to to work.
      How do you disable in mobile?

      Thanks in advance

  3. I love this plugin, however, I’m trying to create a full height background image that will fit the whole screen whatever browser window size is opened. Then, once the window is loaded, I can scroll to see the rest of my webpage. I see that the demo nK uses works this way:

    I’m wondering what additional css or settings I need to use to create this effect.

    Thank you so much!

  4. i have added the parallax plugin . i have got the Symbol which was in picture but am not getting where to add the code .I have added that in custom css in appearance .I am not getting any picture or effects.

  5. Rather than repeat this for every page/post, can I just do it the once using the Additional CSS box?

    I want the parallax effect site wide.


  6. If I use the plugin for this, do I have to leave it active, or can I deactivate the plugin once I’ve set up the parallex effect?

  7. Is there a way to make the background (its URL) a variable that can be set when the related HTML is added to a post? The alternative of having multiple custom CSS segments (.parallaz1, .parallax2, …..) to cover each possible background is unwieldy at best.

    A CSS novice trying to learn. Point me to a site or two and I’ll figure it out for myself, but right now don’t even know what to search for.


Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.