Add multiple background images with Elementor

Multiple background images for Elementor allows you to add multiple background images in the same element (Container, Section or Column).
You can of course position the Elementor widgets superimposed on the images.
This tutorial will effectively guide you to implement your images and with the filters you have, you can apply blending modes and CSS filters.

Table of Contents

Enable and use the component multiple background images

By default this feature is disabled.
In the admin panel select ‘EAC Components’ page then ‘Features’ tab and activate the option ‘Multiple background images’ and save settings.

Backgroung images enable

Add an image position it and define its size

Under the ‘Style’ tab expand the ‘EAC background images‘ section and toggle the ‘Active background images‘ option.
You can add as many images as you want.

MBI enable components

The component behaves like standard Elementor functionality.
You can also select the dimensions of the image (Image size) knowing that the background images are not responsive.
The ‘Position’ and ‘Size’ fields have a ‘Custom’ option which, as their names indicate, will allow you to precisely define the position and its dimensions knowing that for the latter you can enter dimensions with the CSS function ‘calc’.

BGI imae fields

Apply a blending mode to images and CSS effects

Effects are global to background images and cannot be applied to a single image.
You can define a color for the background that will marry with a blending mode if necessary.
The background-blend-mode CSS property defines how background images should be blended with each other and with the background color or between each image if there is no background color and if the images overlapping.
You can also select opacity and use CSS filters like contrast and saturation.

MBI effects tab

Leave a Comment