Image Replacement

Whilst using text for headings is accessible, sometime we want to add convey the same information but use more dynamic visuals. In the first instance, it would be generally a good idea to see if the desired output could not be achieved using CSS web fonts and other CSS features, such as rotation, text shadows etc. Sometimes however, we simply cannot achieve the desired effect without the use of an image.

This mini tutorial demonstrates how we can avoid having to include the image in our HTML, but use CSS to replace the text in, for example, a h1 element.

Assume we have a starting point of a h1 element with text as follows:
```
<h1>Epic Title</h1>
```
In order to be able to target the text within the h1 (rather than the entire h1 itself) we can wrap it in a span, as follows:
```
<h1><span>Epic Title</span></h1>
```

In the CSS we can then specify a background image for the h1 and remove the text from the span as follows:

h1 span{
    display:none;}

h1{
    width:960px;
    height:144px;
    background-image: url('images/EpicHeader.png');}

You can view an example project on GitHub