HTML OVERLAY TEXT ON IMAGE
Put a text overlay over an image

HTML Text overlay on <img> tag
×
HTML Text overlay on <img> tag
Why would you want to use it?

You want to put a placeholder in your web page, for example, you want to mark an image link that is not yet active, "COMING SOON".

"COMING SOON", Example
Use a Ge diode to detect UHF data.

The following code does just that; no script needed, and easy to edit later when the link is available.

            
<img src="images/overlaytext.png" style="background:url(images/mainimage.jpg); background-repeat: no-repeat; background-size: 100% 100%; width:80%; ">

The tricks that make it work are: the overlay text is an image with transparency, the overlay image is used as the "src", and the main image is the "background". Background should be set to "no-repeat", background-size should be "100% 100%" as in the code example. The display size of the image is set with the "width" %age setting; as this is varied the main image and overlay follow each other because of the "100% 100%" setting.

Main Image

The main image can be any normal image type, .jpg, .png, .gif, etc.

Overlay Image

The overlay image has to support transparency, so a .png, is a good choice. A simple way to make the overlay is to:

  1. Open a copy of the main image in, say, Gimp.
  2. Add a new text layer, in Gimp the Text Tool (shortcut "T") will automatically add the text as a new layer.
  3. Adjust the font, font size, and attributes like Bold, etc. and create the text.
  4. Move the text to the correct place on the picture, for example in Gimp use the Move Tool (shortcut M).
  5. Rotate the text if needed, in Gimp use Layer>Transform>Arbitrary Rotation. In the examples I used about 30°.
  6. With the text layer selected, copy the selection, Ctrl-C, and paste as a new image, in Gimp Shift-Ctrl-V.
  7. Stretch the canvas if needed to maintain the original main image size.
  8. Save the image as a .png file.
  9. Add the image file to your website as described in the code above.

Have fun!