Pointer Background Breadcrumbs: Example

<div class="breadcrumb">
  <a href="#" class="first">
    <span>
      Root
    </span>
  </a>
  <a href="#">
    <span>
      First Page
    </span>
  </a>
  <a href="#">
    <span>
      Second Page
    </span>
  </a>
  <a href="#" class="last">
    <span>
      Final Page
    </span>
  </a>
</div>

div.breadcrumb a {
  display: block;
  float:   left;
  margin:  0;
  margin:  0 0 0 -.5em;
  padding: 0 0 0 2em;

  background: transparent url('breadcrumb_bg.png')
    no-repeat scroll -.1em center;
}
div.breadcrumb a.first {
  margin:              0;
  padding-left:        .8em;
  background-position: -2em center;
}
div.breadcrumb a span {
  display:    block;
  background: transparent url('breadcrumb_bg.png');
  padding:    .5em 1.5em .6em .5em;
  background-position: right center;
}
div.breadcrumb a.last span,
div.breadcrumb a.last:hover span {
  background-image: none;
}
div.breadcrumb a:hover,
div.breadcrumb a:hover span {
  background-image: url('breadcrumb_bg_hover.png');
}
span.preload1 {
  background-image: url('breadcrumb_bg_hover.png');
  display: none;
}