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.
You're using
img
tags withbackground-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.You can also use
<i>
tag instead of<div>
tag. asdiv
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>?