0

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

Community
  • 1
  • 1
spiderman
  • 10,892
  • 12
  • 50
  • 84

1 Answers1

2

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;
Reto Aebersold
  • 16,306
  • 5
  • 55
  • 74
  • The first approach results in `background: url("htsprite1.png") no-repeat scroll -61px -110px rgba(0, 0, 0, 0);` , while the second approach looks more cleaner. Thanks, one of my issue was that it was overriden due to the wrong sequence i was using. +1. However still I have issue in displaying the icon. I created the css sprite with the help of this tool - `http://spritepad.wearekiss.com/` – spiderman May 10 '15 at 04:38
  • Can you create a plunker of this? – Reto Aebersold May 10 '15 at 04:49
  • sure, let me try that – spiderman May 10 '15 at 04:50
  • Hey @Reto Aebersold , I tried my code on plunker, and it worked, So somewhere else I am messing up, but that's a positive sign for me to move on. Thank you! I'll mark as answer as the initial problem was related to overriding background. Thanks once again, have a good day – spiderman May 10 '15 at 05:02
  • Hi, can you please check this SO question. I Still have issue with the sprites not appearing in Firefox - http://stackoverflow.com/questions/30147690/background-position-is-removed-on-page-load/30147717#30147717 – spiderman May 10 '15 at 05:50