Geek Answers Handbook

How to remove a border in a sprite image

The border is not deleted in the code below, which is the image sprite. I tried some methods to remove the border using style and border 0, but not to 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

+4
source share
4 answers

Images have a default border, which disappears only when the image is loaded. This image comes from the src attribute of the image. If src is not set, then the image will not be loaded, and the border will be there forever - your case is for sure.

The normal img tag is as follows:

 <img src="/something.jpg" />

yours looks like this:

 <img />

You add your image via css background-image. Not the way it should be done. You can add a background image, but this is usually for other purposes. (check towards the bottom).

Try removing the background image and putting the image location in the src attribute of the image. Like this:

 <img class="next" src="/share.png" />

Now you will see that the image has no border.

In addition When the background image is added to the img element, it usually should contain a placeholder image if img src not set. Think of avatars in the blog comments section.

And When creating a sprite, you can use div p em , etc. Remember that background-image can be applied to any element!

+6
source

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

As you select a particular image from the image sprite more precisely, there is a special place where the image is located. Your class is correct where you retrieve the image using the starting position in css.

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

if you are extracting the image according to the background position, why use the img tag.

Just write html as ... <div class="next" ..>

+2
source

you can use base64 a very small transparent image if you do not use an external file

 <img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
+1
source

Found this, JOPLOmacedo was right, but you do not need to remove the background, just use the src tag. JSFIDDLE . (Sorry for the images, but I needed to check them src )

HTML:

 <a href="http://www.yahoo.com/"> <img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/> </a> <img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>​

CSS

 img.home{width:40px;height:32px; border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;} img.next{width:40px; height:32px; border:none; float: right; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}​
0
source

More articles:


All Articles