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:

Answer 1

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

Answer 2

For people running into this situation, the actual solution to the problem in question (as opposed to people telling you "just don't do that") is to set the src of the image to a blank image; preferably a 1x1 image to reduce load size, and optionally even as an incorporated base64 URI to eliminate the additional HTTP request (depending on which solution is more appropriate).

So from the OP's example, the altered code:

<img class="img-rounded" id="logo" src="/images/blank.gif" />

or

<img class="img-rounded" id="logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" />

Answer 3

using the image as a background. Why not set it as the src property of the button

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

When you set the type as image the input expects an src attribute as well..

Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

Answer 4

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 5

Just add this, hope it'll work well

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