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.
h1
element with text as follows: <h1>Epic Title</h1>
h1
(rather than the entire h1
itself) we can wrap it in a span
, as follows:<h1><span>Epic Title</span></h1>
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