Geek Answers Handbook

Css "background-image" shows an unwanted border, img "src" is not

Getting started with Twitter Bootstrap, I ran into a strange problem about which I can not understand the reason.

When I create an image using:

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

and in CSS:

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

Image shown with a narrow border:

Bordered

Despite the fact that I can not find anything remote related to this effect. Corners are open due to the img-rounded .

Display image using:

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

Relates as expected:

Noborder

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

  • border: none;
  • color: blue;
  • background-color: blue;
  • border-style: none;
+6
source share
4 answers

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

Use either <div> or <img src="pic.png"> rather than an invalid combination of both.

Loans for rblarsen who indicated this.

+2
source

That should work. I believe the problem is with the img tag, which is used without the src attribute. In this case, we can just use the div tag.

I ran into this problem earlier on SO, I don't remember the link to this question.

1) Make your height and width equal to 0.

2) Indicate the appropriate addition according to the size of the image. (i.e. filling: width / height 2px / width 2px / height 2px / 2px)

In short, your left and right padding should add up to the width image. ALSO your top and bottom padding should add up to the height 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 />
+3
source

Just add this , hope it works well

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

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

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

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

Link: 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
source

More articles:


All Articles