NO BUG: Image set to cover not filling the whole area

I have set the background image on the block to cover. However this does not fill the whole section and leave a gap.

I have attached print screens to show the issue I am experiencing.

image
Screenshot 2023-08-29 104022

How to understand from all this what does not work for you?
More information please

I have created a layout which uses background image on the block/ container or section level.

However, when this is set to cover which should fill the block/ container or section it doesn’t

As per the screenshots above you can see a gap.

Not sure how I can explain this any better than I already have. Hope this clarifies the issue :slight_smile:

screenshots from the builder would be nice with the settings you have set.

Screenshot 2023-08-29 111856

Images have been set to cover

Hi @Noswar97,

It’s really hard to tell what causes the gap from these screenshots alone. Is this happening only in the builder or also the frontend? and is there link where I could check it maybe? Thanks!

When you set background-size: cover;, it ensures the background image will cover the entire container while maintaining its aspect ratio.

If you’re seeing the image not taking the full height of the div when background-size is set to cover, then the most likely explanation is that the aspect ratio of the image is causing it to be scaled in such a way that it fills the width of the div first, leading to parts of the height being cropped out.

I’ve also confirmed this by trying a different image: