CSS: Text Over Image
Example
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.
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.