background-position is removed on page load - html

Question

I have a HTML page that tries to display some icons from a sprite image.
I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below,
.locicon{
background-position: -61px -110px ;
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Problem: However, when the page is loaded, the icons are not getting displayed.
When inspecting on chrome and firefox, I can see the sprite image, and this is the runtime definition of the class locicon :
.locicon{
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Everything except the background-position. Why is it happening like this?
I checked if this property is overriden somewhere and couldn't find any such instance while inspecting on the element.
Note: Before posting here, I even tried with a plain HTML file , including the css file, and tested, still the same issue .
background-position is getting removed at runtime!
Note: The Sprite wont appear in my case even after resolving this because of this linked issue, which is rectified now : Just for reference: CSS sprite not appearing in Firefox, but displaying in Chrome

Answer 1

You background-position is overwritten by background. Try to set the background-positionafterwards:
background: url(htsprite1.png) no-repeat;
background-position: -61px -110px;
A cleaner solution would be to set the background properties separately:
background-image: url(htsprite1.png);
background-repeat: no-repeat;
background-position: -61px -110px;