CODEWITHSUNDEEP
csssprite
ganesh
ganesh

Reputation: 166

CSS entire sprites image is loaded

I am new to CSS sprites and trying to use them on firefox. The problem is when I load sprite on tag or any tag, it shows entire sprite image on page.

I tried using text-indent = -9999px also but that didn't help. The image was still shown on top of rest of page. Using z-index didn't help either.

#container{
background: url(csg-50e22b073c545.png) no-repeat top left transparent;
overflow: hidden;
}
.bulletform{
background-position: 0 - 1567px;
width: 30px;
height: 30px;
}

So, my questions are: 1. How to avoid displaying entire sprite image? 2. Can I just load sprite image once on say or some root DIV tag for page? and then use background-position to show individual images at relevant places?

Please help.

Upvotes: 0

Views: 678

Answers (1)

Wojciech Zylinski
Wojciech Zylinski

Reputation: 2035

That's not how you use sprites. You shouldn't load it into any top level wrapper. Instead, set background image for each element that should use sprite and adjust background position. Browsers are wise enough to only load the same image once, no matter how many times you call it in your CSS.

Upvotes: 1

Related Questions