Merging multiple images can be useful for creating professional backgrounds for your Website. The idea is to take two or three separate images and superimpose them. Then use a blending mode to blend the layers together to create a seamless, unified design.

Each element of Divi Builder has a built-in merge mode and filter options making it easy to merge elements in the Divi builder. Of course, you can mix images in Photoshop (or another photo editor), but for those looking for a practical Divi solution, this tutorial should help you, because with Divi it's pretty easy. Once you have the images in the right place, you can mix them up with just a few clicks. And of course, you have an arsenal of Divi options to bring the final touches and give a new creative dimension to the design.

Let's start.

Preview

Here is an overview of the design we are going to build together.

What you need to get started

To begin, you will need to do the following:

1. If you haven't already, install and activate the Divi theme installed (or the Divi Builder plugin if you are not using the Divi theme).
2. Create a new page in WordPress and use Divi Builder to edit the page on the front-end (visual constructor).
3. Upload a few dummy images to the media library to use for the tutorial. I am using images from Eye Doctor Layout Pack .

After that, you will have a blank canvas to start designing in Divi.

How to mix multiple images to create a custom background design in Divi

Let's start with the section and the line

To get things done, add a row of a column to the regular section.

Adding images with the image module

Image n ° 1

Once the row and column are defined, add an image module to the line.

Upload an image that is approximately 500 pixels by 700 pixels. I am using one from the Eye Doctor Layout Pack.

Once the image is uploaded, make the image maximum width using the vw unit of length so that it fits well with the other images that we are going to merge, and then align it left as follows :

• Maximum width: 33vw
• Alignment of the module: left

We want the next image we add to align to the right of that image. So we need to float this image to the left. To do this, add the following CSS to the main element:

float: left;

Image n ° 2

Then add a new image module under the current image.

After that, download a new image whose dimensions are close to 1000 pixels by 667 pixels.

Then give the image a new width and a new maximum alignment.

• Maximum width: 40vw
• Alignment of the module: right

Since the first image is floating to the left, the second image must now be adjacent to the right.

We'll come back to put some finishing touches on these images, but for now let's move on to the settings in the section.

Section settings

Open the section settings and add a background image and gradient as follows:

• Background image: [download image approx 1920px by 1280px]
  

• Left background gradient Color: rgba (1,16,63,0.64)
• Right background gradient Color: rgba (12,113,195,0.82)
• Place the gradient above the background image: YES

Then adjust the padding a bit.

• Upholstery (office): 0px at the top, 0px at the bottom
• Padding (phone): 0px at the top, 10vw at the bottom

Line settings

When the section is complete, open the line settings and update the following items:

• Width: 100%;
• Maximum width: 100%;
• Upholstery: 0px at the top, 0px at the bottom

Add the merge mode to the line

Now the line should cover the entire bottom of the section. This will allow us to add a merge mode to the line in order to merge the two images with the background of the section. To do this, add the following blend mode.

• Fusion mode: multiply

Why multiply?

Multiply blend mode multiplies the current layer / row (including any images in it) by the layer below it (the section background). An easy way to think about the effect is to imagine two slides in a slide projector stacked one behind the other. If you project the two images on a screen, you will get a slightly darker mixture of the two.

Center images vertically

You don't need to, but if you want to make sure that both images in the row stay centered vertically, you can add a CSS snippet to the column. To do this, open Row Settings, then click Column Settings. Then add the following CSS code to the main element.

display: flex; align-items: center;

Final touch to the two best pictures

Right now our top two images pair well, but they can use a few design changes to make it look a bit more professional. We can use a white box shadow to soften the edges of the images and use the Transform command to position them exactly where we want them to stay.

Image # 1 Final Keys

Open the image module settings on the left and update the following:

• Box Shadow: see screenshot
• Box Shadow Blur Force: 6vw
• Box shade thickness: 6vw
• Shadow Color: #ffffff
  

• Transformer Translate: 5vw (X axis), 11vw (Y axis)

Image # 2 Final Keys

Once you are done manipulating image # 1 on the left, open the settings for image # 2 on the right and make the following changes:

• Box Shadow: see screenshot
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Shadow Color: #ffffff

We can even add some filters to make the image sharper.

• Saturation: 30%
• Opacity: 60%

Add text content

Now that our section is complete with three nicely blended images, we can add our contents at the top of the section. To do this, add a new section below the current section.

Then add a row of a column to the regular section.

Then add a text module to the line.

Body Content

Update the contents of the text module with the contents of the following body:

Book an eye exam Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings

Formatting the text

Once the body contents are in place, update the design parameters as follows:

• Text text color: #ffffff
• Font: Poppins
• Title text color: #ffffff
• Text Title Size: 5vw
• Width: 60vw (desktop), 100% (phone)
• Margin (desktop): -35% up, 35% down
• Margin (phone): -70% up, 70% down

Final design

Here is the final design.

Latest Thoughts

Divi's blend mode and filter options provide everything you need to blend images to create professional backgrounds. The trick is to position the images using vw length units so that the background design is also responsive on mobile. But once the images are in position, we can experiment with all kinds of blend modes and countless other design options to create extremely harmonious designs.

Hope this article has provided you with some inspiration and hope to hear from you in the comments.

Cheers!