html - how to stay image constant on hover -

here code using on page

html

 <a href="#" class="bac" data-role="none" style="color:#fff;">   <strong>an&uacute;nciese gratis</strong>  </a> 

css

.bac{  background:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png"); background-repeat:no-repeat; display: block; font:15px/18px arial; height: 22px; padding: 6px 18px 4px 4px; text-decoration: none; margin-right:-4px;  }   .bac:hover{ background-attachment:scroll; background-position:0px -35px; background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png"); background-repeat:no-repeat; height:22px; padding:6px 18px 4px 4px;  } 

here demo http://jsfiddle.net/lc4ky/1/ (open in google chrome browser) when open in google chrome, on hover image going off second showing hover effect.the image going off first time on each refresh. want should stable.is there solution this?

i not sure, think should not apply

background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png"); 

again on hover, hover class should be

 .bac:hover{ background-position:0px -35px;  } 

edit: going off because apply background-image again in hover , google take brand new image , take time load first time, after google pick cache , never goes off again until reload page, if image in same domain don't give full url of image http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png, give relative path of image images/sprites_botones1.png