Background size respect

[emperorthemes]

This is an image placed in section’s background, 1920x400,

Ive added the headline, How do i use the original size for spacing? Can i avoid manual padding?

[friech]

Hi Sathis,

Thank you for writing in, unfortunately, a background cannot have its own height, it just depends on the height of its container, and your container height depends on your content.

However, we can force the container (the section) to have enough height to showcase your background-image. Please add this to the Section’s > Customize > Element CSS area.

$el.x-section {
	min-height: 400px;
}

But please keep in mind that background-images are responsive in a different way, you can’t fit the full image on all screen-size, your background image will be cut on some screen (specifically smaller screens), unless you set the background-size to 100% 100%, but that is not a good idea though as that will squeeze and/or stretch your image.

CSS background-size

If you don’t want your image to be cut, then you need to add it on the page as Image element, then apply a custom CSS to your Headline to float it above the image.

Hope this shed some lights,
Cheers!

[emperorthemes]

It worked, thanks

[friech]

We are delighted to assist you with this.

Cheers!