I've got a div whose one background image changes position based on my WordPress groups:

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 that image has been produced 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->cat_name.'</a>';
                    } ?>
</div>

During my example above it really works for that first category, 'log', since it is just one word category. It does not work, however, for my category 'a day within the life'. Fair enough, what exactly I have to do is call the slug to call the look rather.

I know of Wordpress good examples in which the slug replaces the course but I am battling to implement it and would appreciate outside assistance with this particular. Thanks.

PS: This really is exactly the same effect because the gray category an eye on OMG Ubuntu. They've properly used single-word category names!

I have handled to obtain 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 can be a helpful method of calling the slug because the category, getting across the problem of groups in Wordpress using more than a word. The bottom line is to create the slug and also the category title identical, with '-' among each word within the slug. It will imply that I needed to change my category 'Testing, testing...' to 'testing testing', using the slug 'testing-testing' since it can't deal with abbreviation.