Calling the slug in order to display the cat

I have a div whose one background image changes position according to my WordPress categories:

div.cat-links a.cat-log {
background-position: 20px 5px;
}

div.cat-links a.cat-a day in the life {
background-position: -163px 5px;
}

The code for the image is being reproduced here:

<div class="cat-links">
<?php foreach((get_the_category()) as $category) {
echo '<a rel="category-tag" href="'.get_category_link($category->cat_ID).'" 
class="cat-  '.$category->cat_name.'">'.$category-&开发者_运维百科gt;cat_name.'</a>';
                    } ?>
</div>

In my example above it works for the first category, 'log', because it is a single word category. It doesn't work, however, for my category 'a day in the life'. Fair enough, so what I need to do is call the slug to call the image instead.

I am aware of Wordpress examples where the slug replaces the category but I'm struggling to implement it and would appreciate some help with this. Thank you.

PS: This is exactly the same effect as the grey category tabs on OMG Ubuntu. They have sensibly used single-word category names!

I've managed to find the solution.

<div class="cat-links"><?php foreach( get_the_category() as $cat ) echo '<a rel="category" class="cat-' . $cat->slug . '" title="View all posts in ' . $cat->name . '" href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>'; ?>  </div>

This is a useful way of calling the slug as the category, getting round the problem of categories in Wordpress with more than one word. The key is to make the slug and the category name identical, with '-' in between each word in the slug. It does mean that I had to change my category 'Testing, testing...' to 'testing testing', with the slug 'testing-testing' because it can't cope with abbreviation.