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.
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.
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.
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’.
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.
