Using Background Images for Menu Items

Judicious use of graphics is one of the easiest and visually impactful ways to enhance your website's appearance.

In the custom markers discussion, I showed you how you can apply the list-style-image property to use images to replace the limited selection of bullets offered by CSS. There are limitations to this technique.

First, control over the placement of the markers is limited, relatively cumbersome, and not entirely predictable.
Second, the image can affect the line height of the list item.

A better technique is to use the background-image property. With the BACKGROUND-IMAGE property, not only can you precisely place an image for a bulleted list, but you can achieve effects not possible with bullets, such as graphical buttons and tabs, and advanced rollover effects, as I will demonstrate shortly.

Let's look at our unstyled list of links once again.

Compare this to a list with the default markers replaced by image markers:

You can see that the image marker has affected the line height of the list, effectively increasing the line height of the list. This can be an issue.

This example shows how the effect of using graphic markers becomes an issue. Let's say that we only want markers to appear when the user hovers over a list item. The style sheet for the menu effect follows:

#hoverBullets li {
  list-style: none;
  }  
 
#hoverBullets li:hover {
  list-style-image: url(images/green_star.jpg);
  }

Notice how the list items "bounce" when you pass the cursor over each menu item. This is because the appearance of the image bullet increases the line height of the corresponding menu item. When you move the cursor off the list item, the graphic marker disappears, and the line height returns to normal, creating a very jittery effect. Not good!

To remedy this, let's use the BACKGROUND-IMAGE property instead. This is the style sheet for the implementation using the BACKGROUND-IMAGE property.

ul#backgroundBullets {
  padding-left: 10px;
  margin-left: 0;
  }

Position the image all the way to the left of the content area, but centered vertically:

#backgroundBullets li, 
#backgroundBullets li:hover {
  padding-left: 30px;
  list-style: none;
  background-repeat: no-repeat;
  background-position: left center;
  }

If the user isn't hovering over the list item, don't display an image marker:

#backgroundBullets li {
  background-image: none;
  }  
 
#backgroundBullets li:hover {
  background-image: url(images/green_star.jpg);
  }

This works so much better! Background images are confined to the content area of its element, so no matter how large the element is, it will be clipped by the element's visible box, so the background image does not affect the layout of the list.

You can take advantage of background images to create nice menu button effects that aren't possible with list markers. Background images can be used to soften the 'rectanglitis' effect of styled element boxes.

Here's our list of links again. This time we've applied a background image to give the vertical menu a little more pizazz.

Here's the style sheet that achieves the above effect:

#vertMenu {
  padding-left: 10px;
  margin-left: 0;
  }

Center the text vertically in the button:

#vertMenu li {
  height: 25px;
  width: 179px;
  line-height: 25px;  
  padding-left: 30px;
  background-image: url(images/vertical-button.gif);
  list-style: none;
  }
#vertMenu li:hover {
  background-image: url(images/vertical-button_hover.gif);
  }

Force the entire button to be the hot spot:

#vertMenu a {
  display: block;
  font-weight: bold;

  color: black;
  }

Note: While CSS doesn't give you a way to vertically center content in a containing block, you can trick the browser into vertically centering a single line of text by setting the line-height equal to the height of the containing block. See the resources below for a method to vertically center a block of text.

Background images give you a great deal of control over image effects in your web page, and CSS makes it all possible without requiring JavaScript!

Resources

CSS background-position property. W3C CSS 2.1 Spec.
Vertical Centering in CSS , Dusan Janovsky (aka Yuhu).

Navigation Menu Techniques

Using Background Images for Menu Items

Resources