css "background-image" shows unwanted border, img "src" does not

This should work. I believe the problem is to do with the img tag used without the src attribute. In that case, we can simply use a div tag.

I have come across this problem earlier on SO, I do not remember the link to that question though.

1) Make your height and width as 0.

2) Give appropriate padding as per the image size. (i.e padding: width/2px height/2px width/2px height/2px )

In short your left and right padding should add upto width of the image AND your top and bottom padding should add upto height of the image.

img {
    background: url(http://i.stack.imgur.com/8C4wK.png) no-repeat;
    font-size:0;
    width:0px;
    height:0px;
    padding:36px 99px 36px 99px; /* Since height and width are 0. use appropriate padding. Image is of 197 X 73 dimension. So using 36px on left and right whereas 99px each on top and bottom*/
    border-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<img />

The answer is not to use an <img> tag and try to set a background-image in css.

Either use a <div> or <img src="pic.png"> and not an invalid mix of both.

Credits to rblarsen who pointed this out.