I'm currently using an image sprite as my logo, so when you hover over the logo, it turns red. For the HTML I set it up this way:
<div id="logo-wrap">
<a id="logo" href="<?php bloginfo('url'); ?>"></a>
</div>
I aimed to setting the background color to #000 by adding the "logo-wrap" div, but nothing changes. However, if I add background: #000 url(imageurl); to A#logo the background then appears.
Adding color to the logo itself won't allow me to add padding to the black background. It messes up the whole "sprite" idea.
I'm trying to find a way to have a separate background for the logo and add padding about 10px.
Is this possible? Or will I have to change the HTML and CSS to accomplish this?
Fiddle//
From your question, I think this is what you are going for.
Use this for your CSS
#logo-wrap { background: #123; width:176px; height:61px; padding: 10px;}
A#logo { width:176px; height:61px; background: url(http://keihead.com/test/images/trd_sprite.png) 0 0 no-repeat; position:relative; float: left;}
A#logo:hover { background-position: 0 -61px; }