Community forum for knowledge and support

Updated 7 months ago

Creating Border Radius for Background Images in Header 104

At a glance

The community members are discussing how to create a border radius for a background image in a header. One community member suggests wrapping the image in a div with overflow: hidden and applying the border radius to the div, but this did not work. Another community member mentions that they had to create the layout using a custom element to connect to a CMS, and the layout is not wrapping properly. They also note that adding a span with text causes the parent to lose the text property. A third community member suggests exporting the image as a rounded PNG, which they believe could work. In the end, one community member confirms that the solution worked.

How can I create border radius for background image in header 104?

L
A
6 comments

I think you could wrap the image in a div with overflow hidden and add the border radius to the div.

Tried it but didn't work. Neither width nor max width. Also, one more question. to connect to a cms I had to create this layout with custom element. but it looks like this. It's not wrapping properly.

If I have add a span with text the parent is losing text prop

I see, just opened it on webflow and it's really hard to mess with indeed. Not ideal by any means, but it think you can export a PNG already rounded, it could work.

Add a reply
Sign up and join the conversation on Slack