Twitter Bootstrap Question posted in

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

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;
Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 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

    Login or Signup to reply.
  3. 0

    Just add this, hope it’ll work well

    #logo {
    background-image: url(/Content/Images/logo.png);
    border-radius:0px;
    border:0px;
}
    Login or Signup to reply.
  4. 0

    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 />
    Login or Signup to reply.
  5. 0

    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="" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search