1

I am using CSS sprites however when i hover over it is making another request for the same image and causing a flicker. Any idea why its making 2 requests? Here is my code:

.btn-red-lrg .left {background:url(../images/site-sprite.png) no-repeat 0px 0px transparent;width: 9px;}     
.btn-red-lrg:hover .left {background:url(../images/site-sprite.png) no-repeat 0px -37px transparent;width: 9px;}

2 Answers 2

5

Dont' use the background-shorthand property. Use background-position instead, since you only want to update the position.

/* no need for width, background-image etc. */
.btn-red-lrg:hover .left {background-position: 0px -37px;}

Specifying a background-image:url(...) on the :hover pseudo-class can result in a new request if the caching mechanism aren't sufficient or the expiration date is missing/wrong (see Jeff's answer). Altering the position only won't result in a new request regardless of the browser.

2
  • While this is a good practice, how does this address the question?
    – Jeff
    Feb 20, 2012 at 20:06
  • 1
    @Jeff: Specifying a background-image:url(...) on the :hover pseudo-class can result in a new request by the browser if the caching mechanism aren't sufficient or (as you stated in your answer) the expiration date is missing or wrong. Altering the position only won't result in a new request regardless of the browser. But you're right, I didn't answer the question "Any idea why its making 2 requests?", my bad :/. +1 on your answer.
    – Zeta
    Feb 20, 2012 at 20:14
1

What browser are you using? This is a known bug in using Internet Explorer 6. The solution is to add expires headers to the image on the server.

1
  • All browsers. Chrome, IE8, Firefox
    – Scoota P
    Feb 20, 2012 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.