Set height and width of background on :hover element - background

Question

I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?

Answer 1

Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.