Parallax Background Image Placement

The built-in parallax background option available in Divi makes it easy to create a parallax effect in your layout. But at times it can be difficult to get the placement just right so the portion of the background image you want displayed is visible. In this tutorial we’ll show you how you can use the background-position property in your CSS to control the exact position of your image.

We’re going to focus on the True Parallax option in this example since the effect is better than the CSS Parallax option. We’re also going to focus on the Fullwidth Header module. The technique and CSS will be the same whether you’re applying it to a section, Fullwidth Header, or any other module or element.

The image I’ll be using is a 1920 x 1080 px image. You may have to play around with the exact dimensions to get the effect you want, but this is a good place to start. It should give you plenty of height to work with and will look good on larger desktop screens. Using the technique below, we have full control over the vertical placement of the image. For horizontal placement, you’ll need to crop the image in a way that the objects in the image you want to line up with the left, center or right portion of the header are in the left, center or right portion of the image.

Since parallax is all about motion, please watch the video above to see the end results and walkthrough of the tutorial below. Let’s get started!

In my demo page, I am adding a Fullwidth Section and Fullwidth Header module to the top of the page. After adding placeholder text to the Title, Subtitle, and Body fields within the module’s Content tab, I now need to add my background image. Scroll down and open the Background section near the bottom of the Content tab. Click on the image tab and add your 1920 x 1080 image. Next turn on the Use Parallax Effect toggle. A new Parallax Method dropdown should appear. Choose the True Parallax option.

When the True Parallax option is enabled in the Fullwidth Header module, a new span container with class et_parallax_bg is added to the HTML output of the module. We’ll target this class in our CSS to modify the placement of the image. We’ll also need to give our module a CSS class or ID to target unless we want our changes to apply to all Fullwidth Header modules on the page or site. In my example I added the bottoms-up CSS ID in the Fullwidth Header’s Advanced tab -> CSS ID & Classes -> CSS ID.

We now have the background image set, parallax toggle turned on and set to True Parallax, placeholder text added, and a CSS ID assigned so we can target this header module only. Save the module and let’s add our CSS.

In this example we’re going to add our CSS to the Visual Builder’s Page Settings (the gear icon along the bottom of your screen). Once the Page Settings popup appears, we need to go to the Advanced tab -> Custom CSS. Here we can add CSS that will only affect this page. Below is the portion of the CSS that affects the background image placement:

The CSS above is what controls the placement of the background image (the padding in the CSS further down in this tutorial gives the Fullwidth Header its height). The first value in the background-position pair of values controls the horizontal position. You can modify this value to adjust the horizontal position on smaller screens but on large screens it won’t have any affect. The second value in the background-position pair of values controls the vertical position. This is where we can really fine-tune the placement.

By default, Divi will set these values so that the image is horizontally centered and vertically placed at the top. But because the et_parallax_bg container that holds our background image extends vertically past our Fullwidth Header container at the bottom, it’s not enough to simply change the values to center bottom. We need to lift the hidden portion of the background image container up vertically. For this we need to use a negative value.

In my example, I am using a negative value of 250px. You may need to adjust this value slightly depending on the padding you add to the Fullwidth Header for your image to get the portion of the image visible that you want. You can also change the media query values to your liking if you want to have more granular control over the placement for different screen sizes.

The full CSS that gives the Fullwidth Header its height and controls the style and placement of the text is below:

There’s a lot going on here. I’ve included all of the CSS I’m using to control the placement of the background image, module padding, text appearance and text placement and I’m modifying all of this slightly for different screen sizes using media queries. At the risk of providing too much data, I wanted you to see all of the CSS I’m using to get the layout you see in the video above.

That’s it! If anyone has an improvement, suggestion, alternative method, or any issues please comment below.

* If you see a gap between the bottom of your background image and the bottom of your Fullwidth Header, you’ll either need to reduce the negative vertical value in the background-position (2nd value) or you’ll need to use a taller image.