Right justify background image

[Feldspar]

Hi,

Is there a way to right justify a background image in a WPBakery row?

For instance, I wan the tent to sit on the right edge of the page but always have 60px of teal space above and below it.

test | – Danger.Live | Live Event Printing –

Thanks,

J

[Prasant]

Hello J,

Thanks for writing in!

I suggest you to please take a look at following tutorial to place background image as per your requirement:

Background Image Position - Visual Composer Website Builder

Thanks.

[Feldspar]

Thanks Prasant.

That looks great but it also looks nothing like what’s included with X.

WPBakery Page Builder is a different version of the software than Visual Composer. What’s in X doesn’t have the features shown on that page, or in the video, to position a background image.

Is there something I can update or turn on to get those features?

J

[christian]

Hey J,

Sorry for the confusion. There’s no background position option in WPBakery Page Builder. The least you can do is set the background to cover.

That option by the way is only available if Legacy X Integration is off in WPBakery Page Builder > General Settings which I see is your current setup. If Legacy X Integration is off, there is also no option in the Content Band Settings.

I’d recommend that you use Pro’s Content Builder instead.

Thanks.

[Feldspar]

Thanks Christian.

I made the layout in Pro’s Content Builder
https://danger.live/test2/

Is there a way to limit the background image from extending beyond the row? So the top and bottom of the image do not get cut off at larger screen sizes.

I’d prefer not to load a larger image with extra blank space above and below to compensate.

Best regards,

J

[ruenel]

Hello Jhaysin,

The background image is set to cover the entire section. If you only want the background image within the row container then remove the background image in the section settings and add it in the row container instead.

Please also keep in mind the background sizecover will try to cover the element where the background image were added. Most of the time, the image will be cut off or zoom in that is because the background image will try to fit and cover the whole container. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.