Chrome reloads sprite image on CSS image hover

The image flickers on hover in Google Chrome when I have the following code:

#MAIN_MENU a.foodMenu {
 background: #000 url('../images/home_icons.jpg') -525px -176px no-repeat;
}

#MAIN_MENU a.foodMenu:hover {
 background: #000 url('../images/home_icons.jpg') -525px 0  no-repeat;
}

It seemed that my image was not preloaded fully so I tried preloading the image using javascript or css but to no avail. Found out that the problem is not in the preloading of image, it's the css definition. Apparently, Google Chrome thoughts it needs to reload the image even if you are using the same one.

The solution:

#MAIN_MENU a.foodMenu:hover {
 background-position: -525px 0;
}

Do not use background property to re-define the hover. Use background-position only to re-position the sprite. That's it!