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:

  <img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>

In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?

Thanks. Mike

Answer 1

Tried setting the border to 0px?

EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.

<div class="myDivClass">content to go on TOP of the background image</div>

CSS:

.myDiVClass
{
background: url(Resources/bar.png)  no-repeat;
width: 300px; 
height: 50px;
}

or

 <div class="myDivClass" style="background: url(Resources/bar.png)  no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>

It's best to keep CSS seperate as it otherwise defeats part of the point though.

Answer 2

Try setting background-color to be white

Answer 3

Try setting this instead of background-image:

background: url(Resources/bar.png) no-repeat;

Answer 4

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

Answer 5

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 6

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 7

img tags need a src attribute.

e.g.,

<img src="Resources/bar.png" alt="bar" width="300" height="50" />

But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:

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

Answer 8

You can also add a blank image as place holder.

img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='

That should do the trick!!