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

user_129238 0
Viewed 68443

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

css html javascript
13 Answers

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?

belugabob_133970

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

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>
user_1264670

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.

user_354540

Try setting this instead of background-image:

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

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;}

user_953530

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>
user_78063060
Related