Wrapping a frame border image around a HTML5 canvas

[ruzip]

I need to add some frame border in a form of a single image on a canvas element. The image is around 1470×750 and it should resize automatically depending on the size of the canvas.

I actually found a related solution, but the answer provided here uses div and sliced images and not a single image.

https://stackoverflow.com/questions/5660746/css-wrap-an-image-around-a-div-as-an-border-frame

Something like how CSS3 background contain or cover would do. I would prefer a complete CSS solution if this is possible.

[Paulie_D]

border-image is probably what you are looking for.

[ruzip]

Thanks Paulie_D but border image is good for splices, I need to have it as a single image.

[Paulie_D]

I’m unclear what it is you are trying to do…either you want a border or you don’t.

…and a border-image is a single image….just different parts of it are used for each part of the border.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

[ruzip]

Thanks! it works perfectly now with border-image. Yes, sorry I thought it was a hard process, but found a lot of generators that eases the set up and explains in detail how it works.

PS: I’m trying to mark your first reply as good answer, but nothing happens. fyi

[Author]

Posts