CSS Cookbook, 2nd Edition

Problem

You want to apply a repeating graphic treatment on top of HTML text, such as worn edges or the stripes in Figure 2-40.

Solution

Place a span element between after the opening tag of a heading element, but before the HTML text:

<h2><span></span>Designing Instant Gratification</h2>

Next, use a version of the Gilder/Levin image replacement technique (see Recipe 3.9) to place a GIF file with seamless pattern over the HTML text:

h2 { font:3em/1em Times, serif; font-weight: bold; margin:0; position: relative; overflow: hidden; float: left; } h2 span { position: absolute; width: 100%; height: 5em; background: url(striped.gif); } p { clear: left; }

Discussion

The text within the heading element is set to float to the left. This technique is to allow the background image, placed in the span element, to be placed over the HTML text through absolute positioning.

Normally, when floating an element the heading would move to the left and have the content wrap on the right side. However, the clear property placed on the paragraph stops this from happening.

The height property is set to 5em and overflow property is set to a value of hidden to keep the background image from spilling out of the heading element and onto the other portions of the web document.

See Also

The Gilder/Levin image replacement technique page at http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin; read more about the technique at http://www.khmerang.com/index.php?p=95.