• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Tutorial

Image Replacement Using CSS

CMDR Mitchcraft

Reading time: 2 minutes

Using images on a design is pretty well necessary in today’s visually stunning web.  However, while images look great, there’s no substitute for text when it comes to Search Engine Optimization.  But is there a way to get the visual effect of an image while still having the SEO benefits of text?

With CSS, there absolutely is.

Social Media

See this image above me?  Look like a standard image, with a standard <img> tag doesn’t it?  Well, if you were disable the stylesheets, all you’d see is this:

Social Media

Just text.

So, how can we achieve this?  By using a technique called the Revised Phark Method, with a bit of a twist to make sure that things work no matter where they are.

First, the code (simplified from above because the styles are inline for less “stylesheet bloat”)

<p class="socialmedia">Social Media</p>

Next, the CSS.  First we give it a definitive height and width:

.socialmedia{
height: 277px;
width: 101px;
}

Next, we need to set the display to “block” in order to give it the properties of other “block” elements (like H1, H2, and other similar tags):

 .socialmedia{
height: 277px;
width: 101px;
display:block;
}

After that, we need to set the background image:

 .socialmedia{
height: 277px;
width: 101px;
display:block;
background-image: url(https://mitchcanter.me/wp-content/themes/juicy/images/socialmedia.png);
}

Social Media

That’s starting to look right, but the text is still overlaid on the image.  To get rid of it, we simply indent the text –9999 pixels to the left, removing it from view:

.socialmedia{
height: 277px;
width: 101px;
display:block;
text-indent:-9999px;
background-image: url(https://mitchcanter.me/wp-content/themes/juicy/images/socialmedia.png);
}

So, what is the benefit of doing this?  Number one, browsers that don’t support images will show text, so you don’t lose the effect just because the image can’t be shown.  Also, the SEO benefits of using an H1 tag with text far outweigh those of using an H1 tag with an image and alt text.  Finally, it allows you to write your markup first without having to worry about jamming items into the design; write the markup, then style the elements in order from top to bottom, which saves time in the long run.

css, Image Replacement, Revised Phark Method
  • WordPress: The Ultimate Content Management System (CMS)

    WordPress: The Ultimate Content Management System (CMS)

    Reading time: 2 minutes

    For years WordPress has been touted as the number one blogging platform.  And without mistake – it is.  But as we creep closer to WordPress 3.1 it’s nice to take a step back and see just how far its’ come.  From winning the CMS Hall of Fame Award to the multiple thousands of plugins that…

    WordPress
  • Latest WordPress Hack – Check your Permalinks, People!

    Latest WordPress Hack – Check your Permalinks, People!

    Reading time: 2 minutes

    I’ll type this without the normal pleasantries to make sure this gets out quickly. There’s a WordPress hacker on the loose, and he’s pretty sneaky – he creates a user unseeable to the naked eye (except for the one extra user in the administrator users menu) and masks himself to you, making it easy for…

    WordPress