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

Question

Getting started with Twitter Bootstrap, I ran into a strange problem of which I can't figure out the cause.

When I render an image using:

<img class="img-rounded" id="logo" />

and in CSS:

#logo {
    background-image: url(/Content/Images/logo.png);
}

The image is shown with a narrow 'border':

Even though I can't find anything remotely related to this effect. The corners are open because of the img-rounded class.

Rendering the image using:

<img class="img-rounded" id="logo" src="~/Content/Images/SO.png" />

Renders as expected:

How can I get rid of the border? CSS code I've tried without success:

• border: none;
• color: blue;
• background-color: blue;
• border-style: none;

Answer 1

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.

Answer 2

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 />