I need some help figuring out how I would merge two images on a website. I have a shield image that I want my avatar to appear in.
I have some thoughts:
Make the shield an SVG and load in image as a background image. I find this quite complicated and not sure about all the details.
Maybe there is a way to clip areas of the avatar with CSS so it appears to fit into the shield, but is actually a layer above the shield.
Or there is some other way that maybe someone could direct me to that I could do this.
https://ibb.co/8xLQqzP - shield
https://ibb.co/hXNvQDQ - avatar
https://ibb.co/kKQWcyr - final image