Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
background:url(share.png) 0 0;
height:32px;background:url(share.png) -36px 0;
<img class="home" border="0">
<img class="next" border="0"/>
Images come with a default border, that only disappears when the image is downloaded. That image comes from the
src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
When a background image is added to an img element, it's usually to provide a placeholder image for when no img
src is set. Think of avatars on the comments section of a blog.
When creating a sprite, you can use
ems etc. Remember, the
background-image can be applied to any element!