CODEWITHSUNDEEP
backgroundresizehovercss
gcoulby
gcoulby

Reputation: 544

Set height and width of background on :hover element

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?

Upvotes: 0

Views: 13303

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

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.

Upvotes: 1

Related Questions