How do I remove the gray border that surrounds background images?

Question

I\'ve come across an interesting problem in the following line of code:

Answer 1

Actually, this seems to work at least on Chrome:

img {
 content: "";
}

Answer 2

if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET

The correct way it would be to separate the css from code and to have a CSS class for the image.

<img src='whatever.png' alt='whatever' class='className' />

and in the css to define what className looks like. ,className {border:0;}

Answer 3

add an empty src="" to your image component if your using as a background-image in css the square will disappear

<image class=${styles.moneyIcon} src="" ></image>

Answer 4

So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.

I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.

If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?

Answer 5

I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.

<img id="myImage">

My fix was to update the initial image tag CSS to

#myImage {
  display:none;
}

And then used a JQuery to show it once its content was loaded.

$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

Answer 6

try <img border="0" />

That should do the trick.

EDIT

Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...

instead of a imagetag use a

<div style="background-image: url(Resources/bar.png);"></div>

or if it is a image you want in that area use a

<img src="Resources/bar.png" border="0" Width="500px" Height="300" />