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.
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.
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.
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
[/nk_awb]
Replace ‘Your content here’ with your own content and then save your page.
You can now visit your website to see it in action.
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.
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... </div> </div>
Next you need to add the following custom CSS to your WordPress theme.
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}
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.
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.
Christer says
Maybe I’m stupid but what should I insert under “your own content here” in the shortcode? Is the content the post or what?
Chris
WPBeginner Support says
You would insert the content you would want on that page.
Admin
Saswata Baksi says
Can I add this on the post header code, i.e. before the title on individual post?
WPBeginner Support says
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.
Admin
Jessica says
Why not show a live example (URL) of the parallax effect? I can’t even picture it.
WPBeginner Support says
Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article
Admin
Andres says
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?
Thanks
Chris says
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.
Or
How do you disable in mobile?
Thanks in advance
Chris
WPBeginner Support says
At the moment we do not have the recommended CSS to detect mobile devices.
Admin
Alex says
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!
gayana says
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.
David says
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.
Thanks
Mahdi Sadeghi says
That was Awesome
Thank You.
Thomas Greenbank says
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?
WPBeginner Support says
Hi Thomas,
You’ll have to keep using the plugin as long as you want to keep parallax background effects.
Admin
Ed says
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.
Thanks
Ed says
WPBeginner?
Anyone??
WPBeginner Support says
Hi Ed,
You can add CSS classes using Custom Fields. You can assign a custom field to an article, and then in your theme files look for the custom meta data and then use it as your CSS class.
Admin