How to Create a Double-Layered Background Scroll Effect with Divi | Elegant Themes Blog

If you’re looking for a way to make your website stand out, you might want to learn how to create double-layered backgrounds. Creating double-layered backgrounds will help bring your background image to life through movement. In today’s tutorial, we’ll show you how to create a double-layered background design with Divi. This tutorial contains three parts:

You’ll be able to download the JSON and image files for free as well!

Let’s get to it.

Download The Layout for FREE

To lay your hands on the free layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Create Image Files in Photoshop

Pick Product Image with Clean Background & Open in Photoshop

In the first part of this tutorial, we’re going to create the image files we’ll use throughout the Divi tutorial. To create these, we’ll use Adobe Photoshop, but feel free to use any other image editing software of your choice. The double-layered background image effect will work best if the image you’re working with has:

The image below is a perfect example. You can find this image file in the zipped folder shared in the download area of this post.

Duplicate Layer

Once you’ve opened the image inside Photoshop, clone the original layer once. We’ll be working on the duplicate layer.

Hide Original Layer

To make sure we see the result as we’re moving down the tutorial, hide the original layer.

Create PNG From Object Selection in Image

Use Quick Selection Tool on Plate

In total, we’ll need two image files for the tutorial:

We’re separating the object from its background, so we can manipulate them individually once inside the Divi environment.

To start selecting the object, pick the “Quick Selection Tool” in the toolbar and try to cover as much of the object as possible.

Select + Mask Selection

You’ll notice that the object selection still isn’t good enough. You can finetune how your selection looks by using the “Select and Mask” option when you right-click the selection. Once there, you can play around with the opacity, smoothness, etc.

Create a Layer Mask from Selection

Although we’ve created a smooth selection, there are still parts inside the object that aren’t selected yet. We’ll manually add these parts to our selection by clicking on the layer mask button you can see in the print screen below:

Finetune Selection Inside Mask with Brushes

Once your layer mask has been created, you can start using a brush to modify the layer mask. Make sure your layer mask is selected.

Use a brush that doesn’t have too much hardness to it, so you don’t have to be super-precise.

Double-Check Mask with Colored Layer

You can always double-check your layer mask by placing a colored layer below it. Colored layers will more easily give it away if you’ve missed a spot.

Save PNG Selection as Separate Image File

Create New File

Now that you have the PNG selection of your object, you can clone the entire layer, so you can always go back to it. In the next part, we’ll use the duplicate layer to create the background image without the object.

The size of our object is way smaller than the initial file size, so we’re going to create a new file for our object and bring it over.

Fit Selection in New File

Copy-paste the layer with its layer mask inside the new file you’ve created.

Export for Web

And export it for web as a PNG.

Compress Image File

PNGs with transparent backgrounds tend to have a bigger file size, so it’s recommended you compress the file using a tool of your choice.

Remove Object in Original Image

Select Layer Mask

Back to the initial Photoshop file! There, we’re going to create the background image without the object. We’re using the top layer inside our file to do that. First, make sure your layer mask is selected.

Invert Mask

Then, go to the properties of this layer and click “Invert”.

Apply Layer Mask

You’ll now notice that the object is transparent inside the initial layer. We’re going to apply the layer mask to our layer by right-clicking and selecting “Apply Layer Mask”.

Fill Up Empty Space Using Clone Tool

We still have a hole in the middle, which we need to fill up. That’s where the cloning tool comes in handy. Select a brush size of your choice and fill up the image. You don’t need to be super exact with this, inside the Divi tutorial, we’re going to place the object on top of it.

Save Image without Object

Export for Web

Once you’ve completed the background image without the object, you can save it as a JPEG file at 70% quality.

Compress Image File

Make sure to compress this image too.

2. Build Double-Layered Background Effect in Divi

Add New Section

Upload Background Image

Once you have both image files within reach, it’s time to switch over to Divi! Open a new page and add a new section. Upload the background image you’ve created in the first part of the tutorial.

Move on to the section’s design tab and apply some custom spacing values. The bottom margin we’re adding will help us see the effect fall into place. Normally, this margin will be replaced by the next sections in your design.

Continue by adding a new row using the following column structure:

Then, reposition the entire row.

Add Image Module to Row

Upload PNG Image

Once you’ve completed the row settings, add an Image Module to the row and upload the PNG file you’ve created in the first part of the tutorial.

Change the sizing settings next.

Then, add another row to the section using the following column structure:

Background Color

Open the row settings and change the background color.

Then, apply some custom padding values.

Horizontal Offset

We’re adding some horizontal offset to the position settings too.

Add Text Module #1 to Column 1

Add H2 Content

Time to add modules, starting with a first Text Module containing some H2 content.

H2 Text Settings

Style the H2 text as follows:

Add Text Module #2 to Column 1

Add Description Content

Add another Text Module right below the previous one and insert some description content of your choice.

Text Settings

Change the module’s text settings accordingly:

Add Button Module to Column 1

Add Copy

The last module we need in this column is a Button Module. Add some copy of your choice.

Button Settings

Style the button accordingly:

double-layered background

Box Shadow

Include a box shadow as well.

3. Add Scroll Effects

Image Vertical Motion

In the last part of this tutorial, we’ll focus on adding the scroll effects to the Image Module containing the PNG image file. Open the module’s settings, navigate to the advanced tab and apply the following vertical motion settings:

Image Horizontal Motion

We’re completing our design using the following horizontal motion settings:

In this post, we’ve shown you how to create a double-layered background, and animate it with Divi’s built-in scroll effects. In the first part of the tutorial, we’ve prepared the image files inside Adobe Photoshop. In part two of the tutorial, we focused on using the image files inside Divi to create a responsive design. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

This content was originally published here.