How to Use Absolute Positioned Image Modules as ZoomOut Parallax Backgrounds with Divi

How to Use Absolute Positioned Image Modules as Zoom-Out Parallax Backgrounds with Divi

When using a background image in your section, there are a couple ways to style that image right off the bat. You can use blend modes, gradient background overlays and enable parallax effects. Now, with Divi’s new scroll effects, you can take the animation one step further and beautifully combine a zoom-out effect with the parallax effect to greater another type of your dimension in your web design. To do this, we’ll use absolute positioned image modules and the viewport width unit. In this tutorial, we’ll guide you through the process by recreating a beautiful case study CTA design which you’re able to download for free as well!

Let’s get to it.


Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.



absolute positioned image modules

Download The Absolute Positioned Image Modules Layout for FREE

To lay your hands on the free absolute positioned image modules 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.

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

Let’s Start Recreating!

Add New Section

Background Color

Start by adding a new section to the page you’re working on. Open the section settings and change the background color.

  • Background Color: #000000

absolute positioned image modules


Move on to the section’s design tab and change the width in the sizing settings.

  • Width: 95%
  • Section Alignment: Center

How to Use Absolute Positioned Image Modules as Zoom-Out Parallax Backgrounds with Divi 1



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top