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 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>
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>