Simply Code

Using images for website navigation is not the best practice since search engines and blind users will not be able to read the links content.

However, sometimes we wish or have to use images as navigation elements due the design requirement. That’s where this easy and accessible method comes in handy.

What we want do to is to put images as the background of anchor elements and keep text readable through the HTML code and not visible on the screen.

In this example we will achieve that with using this CSS properties:

• text-indent
• overflow

So, let’s get to the code…

HTML structure

First we need to create HTML structure for our website navigation.
In this example I will use unordered list:

<ul>
<li id="about"><a href="">About</a></li>
<li id="portfolio"><a href="">Portfolio</a></li>
<li id="contact"><a href="">Contact</a></li>
</ul>

Let’s use images… or even better, just one image

To make all this happen we need the menu item images. We could have single image per link (list) item, but if possible it is better to use single image with all states (a:link, a:active, a:hover). Then we can adjust the position of the background image using background-position property.

This is really good method because when changes are applied, we need to change single image file and it also takes less time to load one image once, than 3 or more images every time the user moves his cursor over the link.

This is the image I created for this demo:
(I know, it’s silly menu)

CSS

…and here is the CSS code:

ul {
list-style:none;
margin:0;
padding:0;
}
ul li a {
display:block;
overflow:hidden;
text-indent:220px;
width:200px;
height:30px;
background:url(menu_bg.jpg) no-repeat;
}
ul li#about a { background-position: 0 0; }
ul li#about a:hover { background-position: -200px 0; }
ul li#portfolio a { background-position: 0 -30px; }
ul li#portfolio a:hover { background-position: -200px -30px; }
ul li#contact a { background-position: 0 -60px; }
ul li#contact a:hover { background-position: -200px -60px; }

CSS code explained

For “list item anchor” define overflow:hidden; which means that everithing that goes out of the boundaries of anchor will not be visible. Then using text-indent:220px; “push” the content to the right for 220px and that is 20px over the visible area of anchor.

This way the anchor’s content will not be visible on the screen, but is readable through the HTML code and is accessible for search engines and blind users.

Now, all you need to do is align the background image to fit the single anchor area using background-position property depending on the list item’s ID.

Demo & download

Tako a look at working demo or download zip (source).