CSS: Text Over Image

Here is a example, of text overlaying a empty area of a image.

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 is the HTML code. Start with a outer and inner boxes like this:

<div class="otb52044">
 <img src="cat.jpg" alt="cat" width="432" height="626">
 <div class="inbx75395">your text here</div>
</div>

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

#otb52044 {
position:relative;
width:434px;
height:628px;
}

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

#inbx75395 {
position:absolute;
top:260px;
left:190px;
z-index:7;
}

#inbx75395 p {
color:grey;
font-size:22px;
padding:8px;
line-height:1.7;
}

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