Streaming live at 10am (PST)

Can't stretch background image

Hi:-)
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:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images#stretching_an_image

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.

OR

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!