How can I set the background image to be fully visible zoomed in?

Hi. There is no simple way to do this with a background image. Background image is a CSS jewelry, but not HTML element. This is the expected behavior of the background image.

It will take a high level of CSS coding to proportionally reduce the size of the section and all its content based on the background image proportions

Hi Peter Klinke,

Thanks for reaching out.

Pavel is right. This is natural behavior for the background image.

However, you can try: background-size: contain; in your case to see if it serves your purpose. It will give you a full image horizontally occupied the full space but not vertically.

Best Regards

hello, i do not know if I have correctly explained what I need.

The background image must be shown scaled in full width and with all persons. Or is there another solution to show the complete image width with overlaying text?

Peter

Did you try background-size: contain; ?

The background image must be shown scaled in full width and with all persons.

Hi.

You should study the behavior of the background image, so that you understand that it is not possible.

Start reducing the width of your browser to see this behavior.

When you understand, just come up with another design solution.

For example like this.

Do not use the content-significant images for the background.

for other pagebuilders this is not a problem ...

Hi. Give an example.

This is not related to any page builders. The background image behaves the same everywhere - such behavior is its global property in the web environment.

Perhaps you simply do not understand what a background image is and how it differs from the <img> HTML element

Here is a way that you can get what you need.

Adjust section

Add Image Addon with CSS inside

.sppb-addon-single-image-container {
  width: 100%;
}
img {
  width: 100%;
}

Add Text Addon below Image Addon

Set up Text Addon

But keep in mind that with a decrease in the screen width, the image will decrease proportionally and too much the volume of the text will go beyond the image. And this is exactly the reason why you should find another design solution.

Another method using exactly a background image but not an Image Addon.

Add to the section everything that you need and add your class name. In my example it is my-class.

CSS

.my-class {
    aspect-ratio: 4;
}

The value of the aspect-ratio property should be selected in accordance with the proportions of your background image.

This code will make the height of the section proportional to the background image.

But in this example, a proportional change in the background image will occur only until the height of the text is not more than the height of the section. After passing this threshold, the text will begin to push the section, not allowing a proportional change in height. And you will have to write additional code for the text to make it work at all breakpoints.

1400 px OK

1200 px OK

less then 1200 px NOT OK

Hello Pavel, thank you for your explanation. I will continue to look into this after my vacation.