Using CSS to Replace Content with an Image

Often there are times when, as a developer or designer, you might prefer to use an image rather than an HTML element to represent something — particularly if you’re dealing with text. Using an image lets you have more font variety and more control over the design, but the drawback is that search engines like Google can’t read the text of an image. Luckily, there’s a little trick to get around this problem: using CSS’s text-indent property, you can hide the HTML text from view while inserting the image as part of the background.

Let’s say you want to try it out with a logo. You’ll start with text, like this h2 tag:

  1. <h2>CSSReset</h2>

Screen Shot 2016-08-20 at 3.23.58 PM

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

To replace the text with a logo image, use a negative text indent value (it has to be a pretty high value, like the one below) and insert the image using background: url(). Make sure you define the width and height as well, or the image won’t render.

  1. h2{
  2. color: #fff;
  3. text-indent: -9999px;
  4. background: url("cssreset.gif") no-repeat;
  5. width: 500px;
  6. height: 200px;
  7. }

Share and Enjoy !

0Shares
0 0