When I include an image as an <img> tag as well as a background image on a DOM element, the browser sometimes makes two requests for the same image. This also sometimes happens when using the hover pseudo-property. For example:
<html>
<head>
<style>
div{
background: transparent url(/img/stuff.png) no-repeat;
}
div:hover{
background: transparent url(/img/stuff.png) no-repeat 25px 0px;
}
</style>
</head>
<body>
<img alt="" src="/img/stuff.png"/>
<div>
</div>
</body>
</html>
Why would the image be requested twice (or possibly three times)? Is this a behavior I can avoid? If so how?
[EDIT]
I noticed this while watching the Google appengine local server process so I'm fairly certain it wasn't actually cached by the browser (As it could have been if I had seen it in firebug or webkit inspector).
I've seen this in Google Chrome, IE7, and Firefox 3.