Unncessary gap between rows with background image (WPBakery)

Hi guys,

When I add a background image to a row and set full height+no repeat (this is the only way to display the background image without it repeating and appearing zoomed/pixelated), a large gap is created between the rows. Please see the link I have provided, and view the following screenshot:

I can remove the gap by adding a large negative value (-400px), for example) in the margin settings for the row, but this is of course not the solution. Please let me know how I can remove the gap and retain the image’s proportions.

Thanks,
Tom

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but currently I am unable to see the Gap as you mentioned.

Screenshot for Clarification: https://gyazo.com/5eb40e404f3d1ad274db51e8b9cee73a

Best Regards

Hi Aizaz, that’s very strange…I see this gap in three different browsers (Chrome, Firefox and Safari) on my MacBook Pro and I see it in Chrome on my Windows PC at work as well. How can this be?

Hello,

The issue is caused by the image having less height to cover full height.

1.Please upload a larger image for the row background.

2.Disable full height.

3.Enable the background image size to cover.

Then check back.

Best Regards

Hi Aizaz, thank you for the prompt reply.

Unfortunately I do not have larger images. But, I think I found the solution (for me):

1. Disable full height

2. Change the background image size to cover

3. Manually set the row’s upper and lower padding to match the height of the image – for example the height is 720px so I set 385px up and 385px down

It seems to look nice on the front end. Does this make sense?

Hello,

You can use the solution if it works for you if you don’t have the large height images.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

Best Regards

[Author]

Posts