Surimposing text over image

How to position a text on an image without using tables? Two simple methods depending the effect to be obtained.
The code works on all browsers.

Using layers and CSS

The text and the image are placed into two layers, themselves within a container. This allows to position the text regardless of the position of the image in the page.

These are the top and left style properties that position the text on the image, depending on the its size.

The code

<div style="position:relative; height:400px">
   <div style="position:absolute;z-index:1">
      <img src="images/greenhouse.jpg">
   </div>
   <div style="position:absolute;top:360px; width:600px; height:400px; z-index:2;font-size:200%">
      <center><b>My house...</b></center>
    </div> 
</div>

The inner layers have an absolute position.
The z-index:2 property ensures that the text is above the image.

Creating an image from a text

The image of a text can be done very quickly with Gimp in a few steps.

In the File menu click New.
You have to open the Advanced option to set the background as transparent.
Select a color and a blurred brush.
Draw the text with the brush.
Save it in GIF format (JPG does not support transparency). The file name is here.gif.

The code

<div style="position:relative; height:430px">
    <div style="position:absolute;z-index:1">
        <img src="images/cats.jpg">
    </div>
    <div style="position:absolute;top:150px;left:200px; width:600px; height:430px; z-index:2;font-size:200%;">
        <img src="images/ici.gif" width="200" heigth="100">
   </div>
</div>

The here.gif image is positioned over the cats.jpg image through the z-index property. Its position is determined by the top and left properties.

Demonstrations

How to place precisely a text over an image with stylesheet properties.

Using HTML and layers

My house...

Or how to place an image of text on another.

See also

Mystery image.