Change a:link background image on a:hover

[tecms25]

I'm trying to get the background image to for a link to change when the link is hovered over. Essentially, the hover image is a different colour, so I'm just trying to change the colour of an image (which is not possible in any way that I know, so I'll just swap the image).The code to display the logo:\[code\]<a href="http://stackoverflow.com/" id="logo"></a>\[/code\]And the CSS:\[code\]#logo {position: absolute;display: block;margin-top: 10px;margin-left: 10px;background: url('../img/logo.png') no-repeat;width: 60px;height: 60px;}#logo a:hover {background: url('../img/logo-blue.png') no-repeat;}\[/code\]Is there a better way for me to display the logo that would easier facilitate this hover?Edit (added header CSS):\[code\]#header {height: 75px;text-align: right;position: relative;}#header h2 {font-size: 2.5em;font-weight: 400;text-transform: uppercase;letter-spacing: 0.1em;padding-top: 15px;}\[/code\]