CSS Example of Text over Image

Xah Lee, 2005, …, 2010-10-27

This page shows a example of using CSS to have text overlay image.

The following is a example of the desired effect:

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had very long claws and a great many teeth, so she felt that it ought to be treated with respect.

Try to drag the image. You can see that it is a image with a blank corner. Now, try to drag over the text to select it. You can see that it is text, not part of the image. The text is actually laid on top of the image.

The image can be thought of as a outer box with a specific size (width and height). The text can be thought of as a inner box with a specific size. The image or text can be any tag. For example, the text can be a login box.

Solution

Here's a explanation on how to over-lay a text inside a image.

In summary, you want to set your outer box with position:relative, but no position offset, and also set a width and height. Then, for the box you want to lay over it, specify position:absolute, with offset values for the precise position relative to the outer box, and also specify a width and height.

Here's the source code detail how this works. Start with a outer and inner boxes tag like this:

<div class="outerBox">
<img src="myImage.png" alt="my image" width="432" height="626">
<div class="innerBox">your text here…</div>
</div>

Here's the outer box's CSS. Note the width and height is the image's dimension.

div.outerBox {position:relative; width:432px; height:626px;}

Here's the CSS for the inner box, which is laid on top of the outer box.

div.innerBox {
position:absolute;
top:260px; left:190px;
width:242px; height:366px;
z-index:7;
}

Note the top:260px; left:190px; line. It means 260 pixels offset from the top of the outer box. Similar for “left”.