Full width elementor background image

Hi there
I have created page templates in Elementor with ‘full width’ background images of the top of the page.

Is it possible for me to size the images in such a way that they display the ‘same’ on all devices please? At the moment when viewing the images on my screen – they display the correct ‘parts’ of the images, however when viewing on smaller or larger screens – the images show for example the bottom or the top only of the images.

I am currently using the ‘cover’ option and ‘center-center’ for these background images.

in the attached screenshot you will see the woman’s eyes are at the top of the white block, this is correct – but on other screens, the white block either covers her eyes, or her eyes go too far to the top.

please let me know if I should rather provide you with the login so you can view, as the site is in maintenance mode

Any assistance would be appreciated

thank you

Attachments:

You must be logged in to view attached files.

Hello,

In general, all options that are in the “Section” are related to the Elementor builder, so our theme cannot influent on CSS of the Background-size property.

Here is an explanation of the cover value:

cover
Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Thus, if the picture is zoomed-in, it is normal and the right work for the cover option because such works CSS.

https://monosnap.com/file/Lui1rTKEN9AJw2Sp2kNcTVGzdIch90

Kind Regards

[Author]

Posts