CSS Example of Text over Image

Perm url with updates: http://xahlee.org/js/ex_css_text_over_img.html

(css effect may not show in blogger. Visit the link above to see full effect.)

CSS Example of Text over Image

Xah Lee, 2005, 2010-03-20

This page shows a example of using CSS to lay text over image.

The following is a example of the desired effect:

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.

‘Cheshire Puss,’ she began, rather timidly, as she did not at all know whether it would like the name: however, it only grinned a little wider. ‘Come, it's pleased so far,’ thought Alice, and she went on. ‘Would you tell me, please, which way I ought to go from here?’

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.

How It Is Done

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”.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs