Turn A Background Image Into A Link

Background

Ordinarily, WordPress’ Twenty Ten theme places the blog name at the top left-hand corner of the blog, and makes it a link to the blog home page.

The default font was used on the ancient Greek blog for several months, until I decided it would look better in one of my favorite fonts — Grecian Empire.

In order to show what was done, it might help to see the HTML† WordPress generates for this part of the blog:

<h1 id="site-title">
     <span>
          <a title="Chou Seh-fu Blog - Public" href="https://www.chou-seh-fu.com/wordpress/" rel="home">Chou Seh-fu Blog - Public</a>
     </span>
</h1>

A transparent PNG file containing the blog title in the Grecian Empire font was made with Photoshop and used as a background image for h1#site-title. This resulted in the following garbled display:

To remove the anchor text, the visibility: hidden; CSS rule was applied:

At some later point, the background image was further modified with Photoshop to distress the font:

The Problem

Visually, the header title was now where I wanted it to be, but at a cost: the anchor tag leading back to the blog home page was no longer operable (since it was no longer visible).

So how could the background image of the blog title be turned into a working link?

Solution

This issue was solved when I ran across a method for using CSS to turn background images into links by Aaron D. Campbell at Ran.ge. Instead of using CSS to hide the anchor tag, he uses text-indent to push the anchor text far to the right on the web page (while turning off word-wrapping and making sure that any overflowed text will be hidden.)

The final CSS code looked something like this:

#site-title {
	float: left;	
	line-height: 36px;

       /* SHOW THE BACKGROUND IMAGE. */
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2.png');
	background-repeat: no-repeat;

       /* HEIGHT & WIDTH OF THE H1 TAG FOR FORMATTING PURPOSES. */
	height: 100px;
       width: 650px;

       /* DON'T ALLOW INDENTED TEXT TO BE WORD-WRAPPED. */
	white-space: nowrap;

       /* HIDE ANY TEXT THAT EXTENDS BEYOND THE WIDTH OF THE SITE TITLE H1 TAG */
	overflow: hidden;
}

#site-title a{
	display: block;
       /* MATCH THE SIZE OF THE MOUSE-OVER ZONE TO THAT OF THE BACKGROUND IMAGE */
	height: 72px;
	width: 593px;
        /* TEXT-INDENT OF +9999px WORKS FOR ALL BROWSERS EXCEPT OPERA... */
	text-indent: -9999px;
}

This all works pretty well – the site title image is now clickable. My next goal will be to switch out the background image depending on mouse actions.

† The code in this post is word-wrapped. If copying & pasting, do NOT add returns to this code!