Strange border on IMG tag

Question

HTML:

<html>
<body>

<header>
    <img class="logo" />
</header>

</body>
</html>

CSS:

* {
    margin:0px;
    padding:0px;
    border:none;
}

img.logo {
    width:126px;
    height:50px;
    background-image:url('images/logo.png');
}

One way or another everytime i try to style an IMG like this a strange border appears. Even if I would place border:0px; or border:none; in the img.logo css the border remains.

This is not valid html. src and alt are [required attributes for the image tag](http://www.w3schools.com/html5/tag_img.asp) — Vishal Shah, Apr 21 '11 at 11:10
That explains a lot thanks. The reason I used the IMG tag is because i find it the most logical tag for an image and it doesnt need a close tag. — Mark, Apr 21 '11 at 11:20
IMG is still the most logical tag for displaying an image that ***is content*** and not decoration (aka presentation). If your document still makes sense without the image, CSS is preferred. You may want to use an [image replacement technique](http://css-tricks.com/css-image-replacement/) or just use a transparent .png of the logo in an IMG tag, in addition to a background. — Wesley Murch, Apr 21 '11 at 11:27

thirtydot · Accepted Answer · 2012-03-22T16:29:08.190

75

It's the default "special" border that appears when you use an img element with an a src attribute set to something that doesn't exist (or no src at all).

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

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

I have to point out that it (in this case) makes no sense to use an <img> with background-image. Just set the src attribute and forget about background-image.

edited Mar 22 '12 at 16:29

answered Apr 21 '11 at 10:52

thirtydot

224,678
48
389
349

I have never heard of this and can't reproduce it. Can you possibly give a reference, or is this browser specific? – Wesley Murch Apr 21 '11 at 11:01
Different browsers do behave differently with this. Look at this in Chrome or IE8, for example: http://jsfiddle.net/6LtfP/ Irritatingly, the `blank.gif` I linked to doesn't seem to be transparent. I had to find another version. – thirtydot Apr 21 '11 at 11:10
1

Wow that is quite interesting, thanks for sharing that. I was aware that FF needs the `-moz-force-broken-image-icon` to get the icon, but I've never seen how it can be affected in other browsers by using a blank src VS a non existent src VS no src attribute. IE has two icons, which I've never seen, and Chrome didn't display a border on the one with no src attr. Very interesting, thanks. – Wesley Murch Apr 21 '11 at 11:14

score 10 · Answer 2 · answered Mar 25 '16 at 23:22

10

You can Simply Use div instead of img for background image , if you are not going to use src attribute anywhere.

<div class="logo"> </div>

otherwise src is required.

answered Mar 25 '16 at 23:22

ALi Aryan

121
1
2

score 3 · Answer 3 · answered Mar 16 '20 at 04:24

Combining @thirtydot's answer to this question with @Layke's answer for Smallest data URI image possible for a transparent image, here is an all-in-one solution:

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

score 2 · Answer 4 · answered May 16 '17 at 11:19

2

This works for me

img {
  text-indent: -999px;
}

answered May 16 '17 at 11:19

Kirubel

1,461
1
14
33

that just moves it away, so if your screen is a 4k you still see it but in a different place :) perhaps add some additional 0000 there – Ewald Bos Sep 07 '18 at 17:26
something like -200vw – eballeste May 04 '21 at 20:57

score 2 · Answer 5 · edited Aug 15 '20 at 14:27

2

I had the same issue, but now the border does not appear.

Solution:

Add following in the img tag in HTML

src=""
border="0"

edited Aug 15 '20 at 14:27

Navjot

1,202
1
11
24

answered Aug 14 '20 at 21:11

Deepak

21
1

Strange border on IMG tag

5 Answers5

Linked