CSS: Text Over Image

By Xah Lee. Date: . Last updated: .

Example

Here is 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.

Code

<div id="outbox957">
<img src="i/alice-cheshire.png" alt="Cheshire cat" width="432" height="626" />

<div id="inbox830">

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

</div>

</div>
#outbox957 {
 position: relative;
 width: 434px;
 height: 628px;
}

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

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

How Does it Work

This is done by having a outer box element CSS: 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 CSS: Position Absolute , with offset values for the precise position relative to the outer box, and also specify a width and height.

CSS Layer Examples