HTML Text Over an Image

Have you ever seen a site where HTML text is rendered over an image? One example of this is Pro Blog Design‘s article headings.

HTML Text Over an Image on Pro Blog Design

The effect looks good, and it’s search engine-friendly. CSS-Tricks has a tutorial on how to create a similar implementation with CSS absolute positioning.

Basically you create a relatively-positioned DIV and put the image and H2 elements inside. Then you absolutely position the two elements, and add a solid or semi-transparent background behind the heading text.

Text Blocks Over Image [CSS-Tricks]