-
Notifications
You must be signed in to change notification settings - Fork 7
Image Replacement
Logan Franken edited this page Oct 5, 2015
·
1 revision
Image replacement is a technique for replacing a text HTML element with an image.
A canonical example is using an image for a website's title. Instead of doing the following:
<h1><img src="logo.jpg" alt="Website Name"></h1>
The bare text element can be used:
<h1>Website Name</h1>
And the text can be replaced with the image using the Phark method of image replacement:
h1
{
background: url(logo.jpg);
height: 100px;
text-indent: -9999em;
width: 400px;
}
This has a number of benefits:
- Ensures the element is clear to users with a screen reader
- Maintains a separation of concerns between HTML and CSS