What's the best way to inject CSS from functions.php?

So I have a large banner/background image on my pages that I have wrote a function for that sources the image from the “Featured Image” of the post/page.

https://dev.jamiepoole.me/leddesign/WordPress/

It basically just checks if the Featured Image is set, if it is – breaks PHP and writes CSS, using the post_thumbnail URI as the background: url of the DIV element – and if not breaks PHP and writes CSS to place a default banner.

Here is my function:

function LedDesign_Banner(){
	global $post;
	$bgimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
	if (!empty($bgimage)) {
?>
<style id="LedDesign-Custom-Banner" type="text/css">
hgroup{ background-image: url('<?php echo $bgimage[0]; ?>'); }
</style>
<?php
	}
	else {
?>
<style id="LedDesign-Custom-Banner" type="text/css">
hgroup{ background-image: url(<?php bloginfo('template_url'); ?>/images/bgr_home.jpg); }
</style>
<?php
	}
}

add_action('wp_head', 'LedDesign_Banner');

It works fine – but I can’t help but feel that this is messy. I don’t like that it just plops the CSS right in the head.

I’m thinking I should get it to call a JavaScript file or create a new CSS sheet and link to that. Thoughts?

How would you suggest this could be cleaned up? (again, this method works fine – I just have a perfectionist/OCD obsession with it not being neat)