1. Home
  2. WordPress Tutorials
  3. How to Create a Parallax Effect on Any WordPress Theme

How to Create a Parallax Effect on Any WordPress Theme

Do you want to create a parallax effect on your WordPress website? The parallax effect is a design effect that makes the background image scroll down slower than the foreground content. This causes a sense of depth that gets added to the page on which the effect is taking place. This can add some cool dynamics to your WordPress pages without having to buy a premium theme.

There are three key guidelines to follow when making a website: have great content, make sure the website works correctly, and make the website look great. Adding simple design effects to your pages can make a common free WordPress theme look better than some premium themes. Today, I will demonstrate how to add the parallax effect to WordPress using any theme.

Why Use the Parallax Effect to Enhance Your Website

Enhancing the appearance of your website is an ongoing task and you should always be improving and thinking of ways to make your website look better. Many visitors will judge a website solely based on the homepage appearance and in that first glance, they will choose to either stay or leave, which makes the first impression especially important. The appearance of your website starts with the theme you choose to use. There are many ways to modify the appearance of free themes, but sometimes you may choose to pay for a premium theme that has the desired feature built in.

Of course, you may not want to pay for premium themes and you will be pleased to know that you can make an awesome website without spending any money. One of the best ways to make a dynamic theme is to add the parallax effect to your pages. Depending on the nature of your background and foreground images, the added depth can really make them look great together.

How to Create a Parallax Effect on Any WordPress Theme

Today, I will demonstrate how to add the parallax effect to WordPress using any theme. There are multiple ways to add the parallax effect to your WordPress website, but we will focus on the easiest method first. The easiest way is to use a WordPress parallax effect plugin like the Advanced WordPress Backgrounds plugin. This plugin makes it extremely easy to add this effect to pages. Other methods include purchasing a premium theme with the effect built-in or using CSS. The CSS method is quite challenging because it requires a fair amount of HTML knowledge to be properly setup. I will go over both methods.

Let’s start by going to the plugins area of WordPress and click on the “Add New” button.

click on the "Add New" button.

Search for AWB in the available search box. This will pull up additional plugins that you may find helpful.

Search for AWB in the available search box.

Scroll down until you find the Advanced WordPress Backgrounds plugin and click the “Install Now” button and activate the plugin for use.

click the "Install Now" button

Unlike other plugins, the Advanced WordPress Backgrounds plugin does not have the main settings page. Instead, you can access it on any page or post on your website. Go to the page or post you would like to add the parallax effect to. Look on the toolbar, you should now see the “Advanced WordPress Background” button. Click on it.

 Click on the "Advanced WordPress Background" button.

A popup window will appear. In this window, you can create a lot of different background effects and combinations other than the parallax effect, but we will focus on it. Select the “Image” option for the Background Type drop-down box. Click on the Stretch checkbox that appears next to the drop-down box.

Click on the Stretch checkbox

Click on the “Select Image” button and choose the image you want to use as the background. Since it will be a background image, make sure it is a large image or the stretch will pixelate it.

Click on the "Select Image" button

The next box is the overlay color and you may or may not want to use it. Scroll down and you will see the Parallax section. By default it is disabled, but you can change that to one of the many effects available. The most common is the scroll down effect, but feel free to pick whichever you like best. You can always experiment with each one until you find the one that’s perfect for your website. You can then choose the scroll speed and if it is mobile-friendly or not.

Choose the best Type for your website.

Once you are happy with the settings or ready to test how they look, click on the “Insert” button. You will now see a few lines of shortcode appear on the page. It should read like this:

[nk_awb awb_type=”image” awb_image=”34″ awb_image_size=”full” awb_image_background_size=”cover” awb_image_background_position=”50% 50%” awb_parallax=”scroll” awb_parallax_speed=”0.5″]

Your Content Here

[/nk_awb]

Simply replace the “Your Content Here” with your actual content and you are all done!

Congratulations, you have successfully added the parallax effect to your website. Keep in mind there are multiple effects you can do with this plugin and you can add different ones to different pages. Remember, there is no bulk option so if you want to add the same effect to multiple posts or pages you will need to copy the shortcode and paste it on every page you want it on.

Parallax Effect With CSS

If you do not have any HTML experience, I would not recommend trying this because you could potentially insert the code into the wrong location and mess up the website. You need to upload the image you would like to use as the background image into your media library. Once it is uploaded, select the image to see the URL link and copy it for later use.

select the image to see the URL link and copy it for later use.

Now is where your HTML knowledge will come into play. You need to add the following HTML lines into your post or page where you want the effect to be present:

<div class=”parallax”>
<div class=”parallax-content”>Insert Content here</div>
</div>

Of course, you need to put your content in the place of Insert Content Here.

Now it is time to use CSS to add the effect in. You now need to add the following CSS to your theme’s files:

.parallax {
background-image: url(“IMAGE URL HERE”);
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;
}

Replace the “IMAGE URL HERE” with the URL of the image you selected at the start. You can also edit the other settings to your liking. Make sure you save your changes. Your post or page should now have the parallax effect working.

Website Design Never Ends

Almost every major website gets significant design changes every year and it is important that they do. In some cases they do not want the appearance to change drastically and moving a certain search box a few pixels to the left might not seem like a big deal, but it is!

It is important to make sure your website stands out amongst all of the competition. Making a strong first impression with a well-designed homepage will really help visitors decide to take a look around.

What kind of effect have you added to your website? Do you prefer using the plugin or the CSS method?

Author: Chris Racicot

Chris is the Support Manager at GreenGeeks and has been with the company since 2010. He has a passion for gaming, scripting and WordPress. When he’s not enjoying his sleep, he’s working on his guitar skills and fiddling with 3d printing.

Updated on December 13, 2017

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.