Can't stretch background image

I want to add a marker-like border to my buttons, like this:

my idea was to add four background images (svg’s):

vertical bg images have fixed width (3px), stretch vertically (height 100%). Horizontal bg images the other way around.

According to Mozilla, it should work:

But the result is this:

Here is my site Read-Only: Webflow - peilemerker.no1
(how to share your site Read-Only link)

Hey, @Alexander_Fjelldal instead of custom try contain for bot top and bottom images.


give this video a try

O/P of the video should be like :arrow_down:

Hope it helps :peace_symbol:

1 Like

@Sachin thanks a lot! works well. Is it possible to maintain the height of the bg img, but still allowing it to stretch?

Try this method or you will have to use link-block and position-absolute the images on all sides to make them stretch!