CSS: Text Over Image

By Xah Lee. Date: . Last updated:

This page shows a example of using CSS to have text overlay image, using CSS position:absolute.

Here's a example, of text overlaying a empty area of a image.

Cheshire cat

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.

This is done by having a outer box element position:relative, but no position offset, and also set a width and height.

Then, for the box you want to lay over it, create a inner box with position:absolute, with offset values for the precise position relative to the outer box, and also specify a width and height.

Here's the HTML code. Start with a outer and inner boxes like this:

<div class="outerbox">
 <img src="cat.jpg" alt="cat" 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 line. It means 260 pixels offset from the top of the outer box. Similar for left:190px.