Add centered background image to separator

I’m trying to add a background image to a separator as such:

This isn’t difficult to do outside of Beaver Builder but I cannot figure out how to do it using BB.

I would normally just use a couple of divs. Add the background color and height of the separator to the parent div. And then add the image as the background to the child div - plus some tweaking of height, position, etc.

How can I make the above in BB. It needs to be a full-width separator of some sort (separator, bottom border, background color, etc.) with the image completely centered.


Hi Lloyd,

We don’t offer custom CSS/HTML support in our forums as we keep very busy working on BB, however, someone could offer up a custom solution here in the near future.

What about using a single full width row with the separator module and photo module in the same column with some negative margin on the photo module to bring the image up overlaying the separator? Or vice versa with a row background image and negative margin on the separator? This isn’t optimal on mobile from my quick tests, but with a bit of CSS, I think this could work for you.

Alternatively and possibly easier than the above, what about just using an HTML module and creating your custom separator from scratch applying some CSS for styling?


Bump. I was wondering about separators too. Like the screenshot above and diagonal separators.

Anyone? Thanks.