Affix image ontop of an image

Hi. I want to take an image (user-provided) and then apply another image on top of that, like a watermark but in a certain position (bottom left).

So I essentially create a watermarked image.

How is this possible?

Hi @cliffwoodjames,

A couple options (assuming the watermark is a PNG with transparency or an SVG)…

  • Make the image the background of a container and the watermark an element inside that container.
  • Put both the image and the watermark inside a container and adjust the position and z-index of each accordingly.

This would be trivial to do with the new layout engine, but of course, neither approach actually modifies the image. It would be trivial for anyone with a modicum of web savvy to download the image without the watermark.

EDIT

If you do want to actually modify the original image, that is possible using a canvas element, but it would require some JS or a plug-in.

1 Like

Build a mini service and do it yourself! I can build this as a plugin for you if you’re interested!!

This topic was automatically closed after 70 days. New replies are no longer allowed.