Adding category to site name in header as an image

Hi all.

I have a div block that is positioned next to my site title (a background image in the site header) with a secondary text in a background image. Can’t use inline text due to graphic considerations.

I need to:

1. Change the background url of the secondary div block based on what category I’m in. I have a manageable 6 categories. I’m attempting to do so with a separate php file…

<!-- Add context-sensitive page title -->
<div id="context-sensitive-page-title">
<?php
$cat_name = get_category(get_query_var('cat'))->name;
if ( is_home() ) {
echo '<a href="" style="background-image:url(https://blog.site.com/wp-content/images/standard-identifier-to-add-to-title.png);"></a>';
} elseif ( $cat_name=='My Favorite Category' ) {
echo '<a href="" style="background-image:url(https://blog.site.com/wp-content/images/category-1-to-add-to-title.png);"></a>';
}
?>
</div>

My code is not doing anything of course. This was an attempt based on various support posts. Any help on how to capture the category in a variable and use it in a conditional would be greatly appreciated.

I also want/need to:
2. Use a relative url, but <?php bloginfo(‘template_directory’); ?> is breaking the code due to the apostrophes.
3. Swap the image with a different colored version on hover, or change the transparency.
4. Make it work for archive pages, so the “My Favorite Category” archive would show the same image as the related single post.

Yeah?