0

I am struggling to make a CSS sprite appear in my HTML page, and I couldn't. Then I put the code on plunker to share the code to SO, and it worked! Then I understood that it doesn't work on Firefox, but works on Chrome.

Please help me

Source code:

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.outdoor {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
}
.parking{
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;
}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <img class="outdoor" /><img class="parking" />

</body>

</html>

Linked to : background-position is removed on page load

Note: I'm removing the Test URL. The code is present here, and hence doesn't reduce the clarity of the question.

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

2 Answers2

3

You're using img tags with background-image. I honestly don't know what browser support is for that, but it's a bad idea. Instead use divs. You'll also need to make the styles forcing it to inline block. Alternatively, you could go with something like font awesome/glyphicon's strategy of ::before styling, usually used with spans.

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.outdoor {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
    display:inline-block;
}
.parking{
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;
    display:inline-block;
}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <div class="outdoor" ></div>
    <div class="parking" ></div>

</body>

</html>
Dylan Watt
  • 3,357
  • 12
  • 16
2

You can also use <i> tag instead of <div> tag. as div is a block level element.

Its a best practices to use <i> tag for image sprite. Here is the post why <i> for icons Should I use <i> tag for icons instead of <span>?

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
  .bg_icon{
        background-image: url(sprites.png);
        background-repeat: no-repeat;
        display:inline-block;
  }
.outdoor {
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
}
.parking{
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;

}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <i class="bg_icon outdoor" ></i>
    <i class="bg_icon parking" ></i>

</body>

</html>
Community
  • 1
  • 1
Govind
  • 162
  • 10