Itchy Nekotorych Itchy Nekotorych -4 years ago 138
CSS Question

css sprite malfunction

I have a bunch of images that I have consolidated into a single png. I am trying to use these images to make css sprite classes.

<style>
img.plusOne
{
width:50px;
height:50px;
background:url(acknowledgement.png) 0 0;
}
</style>

<body>
<img class="plusOne" src="acknowledgement.png" width="1" height="1" />
</body>


Instead of displaying the first icon in the png which is 50px by 50px, what is happening is that the whole png file is being squeezed into a 50 x 50 icon.

Answer Source

That's because <img> loads and displays the entire image.

Usually people use a <div> or <span> tag with display:inline-block for the sprite, instead of <img>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download