background-position is removed on page load

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;