Textured and patterned text using CSS

When textured or patterned text occurs on a web page, it is usually in the form of an image created in Photoshop or another graphics editor. As well as taking time to implement, using images instead of text can harm a website’s search engine ranking. Fortunately it is possible to apply textures and patterns to real text through the use of CSS and PNG overlays, as shown in the example below. The text is present in the HTML source code, making it easy to change and helping search engine optimisation.

tiger

The idea

We would like to be able to apply an alpha channel to the text, but it isn’t possible to style text this way in current versions of CSS. Instead we place a copy of the background image above the text, and apply the inverted alpha channel to it. In other words, this foreground overlay is transparent where we wish the text to be opaque, and has increasing opacity where we wish the text to have increasing transparency. The foreground image used in the example is shown below.

Where the overlay is transparent, the text shows above the background. Where the overlay is opaque, the background appears to show through the text. While the background image can be a JPEG or PNG image, or even a solid colour, the foreground overlay must be a PNG image as this is the only widely-supported format with support for alpha channels.

In the HTML

Add the following code to your HTML, replacing line 2 with your text:

1
2
3
4
<div class="patternedText">
  <!-- place the text here -->
  <div class="patternAbove"></div>
</div>

The div element with class ‘patternedText’ will contain the background image, while the div element with class ‘patternAbove’ will contain the foreground overlay image.

In the stylesheet

Add the following rules to your stylesheet, changing the image names on lines 2, 9, and 19, and the values on lines 3 and 4 as appropriate for your design. Note that line 19 is wrapped to fit within the width of this page, but should be a single line in your stylesheet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

20
.patternedText{
  background:url('pattern-below.jpg');
  width:320px;
  height:160px;
  position:relative;
}

.patternAbove{
  background:url('pattern-above.png');
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

* html .patternAbove{
  background:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='pattern-above.png',sizingMethod='scale');
}

The first block displays the background image (whose name is specified on line 3), sets the width and height of the element to the values specified on lines 3 and 4, and sets the element to be positioned relatively, which allows the foreground image to be overlaid.

The second block displays the foreground overlay image (whose name is specified on line 9) and styles it to show above the text and background image.

The third block uses Internet Explorer’s ‘filter’ property to ensure that the PNG transparency works in Internet Explorer 6, which has no native support for alpha channels. The use of ‘* html’ in front of the selector prevents other browsers from applying these rules.

Where now?

Found this useful? Share it:

Also in HTML and CSS: