20

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':

Bordered

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:

NoBorder

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;
4
  • 4
    Why would you insert a background-image on an image?
    – razemauze
    Oct 15, 2015 at 9:40
  • border-style:none? Oct 15, 2015 at 9:41
  • Are trying to achieve something like this? JSFiddle As using image as background-image on an <img> tag wasn't a great idea. Oct 15, 2015 at 9:43
  • 1
    @rblarsen Good question. I had a <div> originally, but seeing a Bootstrap sample, I decided to change it to <img> which makes no sense at all keeping the same css. I've changed it to a <div> again and it works fine.
    – MeanGreen
    Oct 15, 2015 at 9:53

5 Answers 5

20

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.

14

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(https://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 />

3

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="" />
2

Just add this, hope it'll work well

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

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

1
  • I have different themes, using css files to change for example this logo. I don't want to move the logic to the markup to set the correct src.
    – MeanGreen
    Oct 15, 2015 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.