How to remove the Border in image sprite

Question

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 .

<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>

JSFIDDLE

Answer 1

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:

<img />

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.

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

Also When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!

Answer 2

Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.

As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.

A simple solution to remove the border is just make the img tag as a div.

if you fetch the image according to the background position why it is necessary to use a img tag.

Just write the html like ...<div class="next" ..>