CODEWITHSUNDEEP
htmlcss
PHP
PHP

Reputation: 443

How to remove the Border in image sprite

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

Upvotes: 4

Views: 2385

Answers (4)

Francesco
Francesco

Reputation: 1148

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

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

Upvotes: 1

Chandan Mohapatra
Chandan Mohapatra

Reputation: 21

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

Upvotes: 2

Paulo R.
Paulo R.

Reputation: 15609

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!

Upvotes: 6

Liam McInroy
Liam McInroy

Reputation: 4366

Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the 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;}​

Upvotes: 0

Related Questions