Wondering if anyone can help me figure out how to build a layered image in HTML and CSS

2 years ago from , Owner of MagentoWizard.com

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:

  1. 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.

  2. 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.

  3. 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


  • Tank XuTank Xu, almost 2 years ago

    It's easy if you use three layers to build this. Gradient background layer -> Avatar layer -> Shied layer. You can use the ::before and ::after pseudo-element with the avatar img tag to display the shield .

    1 point
  • , almost 2 years ago

    This worked great!


    0 points
  • Eric York, almost 2 years ago

    Hmmm. Not sure why you wouldn't just use the final image, since that seems to be the effect you want . . . .

    Anyhow, going the route of #1 need not be complicated. First, the background image doesn't need to be .svg—it could be any acceptable image format. Then, you'd use background-image: url(path/to/the/shield/image.png); in your css and put your avatar image in the html. That's all.

    For route #2, you can use the clip-path and z-index properties to achieve what you want.

    But, again, those seem like overkill. Why not just use the final image as you have it?

    Anyhow, best of luck.

    0 points
    • Chris Rosenau, almost 2 years ago

      Because I have like 100s of avatars and dozens of shields with colors. So I would need to hundred of thousands of images, instead of making the two base images and dynamically combining.

      0 points