CSS * { margin:0px; padding:0px; b...">
Best IT Recipes

Strange border for IMG tag.

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, every time I try to create such an IMG, a strange frame appears. Even if I set the border: 0px; or borders: no; in img.logo css the border remains.

+30
html css image border
Apr 21 2018-11-11T00:
source share
3 answers

This is the standard special border that appears when you use the img element with the src attribute set to something that doesn't exist (or doesn't have src at all).

A common solution is to install src in the blank.gif file:

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

I must point out that it (in this case) does not make sense to use <img> with background-image . Just set the src attribute and forget about background-image .

+57
Apr 21 2018-11-11T00:
source share

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

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

otherwise src is required.

+7
Mar 25 '16 at 23:22
source share

It works for me

 img { text-indent: -999px; }
+1
May 16 '17 at 11:19
source share


More articles:


All Articles