removing img border

Question

I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?

   <div class="mosaic-overlay">
   <img class="cover1"></div>

   .cover1  {width:300px;height:185px;
            float:left;background: url('/img/cover.jpg') 0px 0px; 
            border:0;}

Many thanks.

Erik

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all — Stuart Burrows, Jun 27 '11 at 19:44
@joakim: Closing the `img` tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close `img` tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right. — cHao, Jun 27 '11 at 23:29

score 17 · Accepted Answer · answered Jun 27 '11 at 20:12

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

neaumusic · Answer 2 · 2016-01-06T20:38:00.060

Set your <img> source to transparent.

#img {
  width:150px;
  height:auto;
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;
  background-size: cover;
}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

score 5 · Answer 3 · answered Sep 22 '15 at 11:40

5

it's the border of alt text, try

img {
  text-indent: -999px;
}

answered Sep 22 '15 at 11:40

whatif

79
1
2

score 0 · Answer 4 · edited Jan 19 '19 at 13:36

0

I use that java script trick, I initialise all images sources with a blank image.

onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");

for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}

edited Jan 19 '19 at 13:36

Harsh Patel

6,334
10
40
73

answered Jan 19 '19 at 13:07

removing img border

4 Answers4

Linked