CODEWITHSUNDEEP
javascripthtmlcss
Michael Swarts
Michael Swarts

Reputation: 587

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

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

Upvotes: 48

Views: 72370

Answers (13)

Kuza Grave
Kuza Grave

Reputation: 1574

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>

Upvotes: 0

rainabba
rainabba

Reputation: 4287

The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:

content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.

img {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  *
  vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

img:not([src]) {
    content:             url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

.myuniqueimage {
    background-image: url('../images/foobar.png');
    height: 240px;
}

Thanks to +programming_historian and +binnyb for the data:image tip

Upvotes: 9

wolfstevent
wolfstevent

Reputation: 685

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

Upvotes: 1

Andrea Zilio
Andrea Zilio

Reputation: 4544

Actually, this seems to work at least on Chrome:

img {
 content: "";
}

Upvotes: 14

Angely Wu
Angely Wu

Reputation: 9

Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:

{-webkit-box-shadow:none;}

Hope it works for you too.

Upvotes: 0

Mark Rhodes
Mark Rhodes

Reputation: 10217

I know this is an old question but I found this useful..

In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.

    <img src="transparent.png" style="background: url(sprite.png) x y" />

Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp

Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.

Upvotes: 0

user424540
user424540

Reputation: 261

You can also add a blank image as a place holder:

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

This should do the trick!

Upvotes: 26

Geerad
Geerad

Reputation: 374

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>

Upvotes: 2

belugabob
belugabob

Reputation: 4460

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?

Upvotes: 82

The real napster
The real napster

Reputation: 2324

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

Upvotes: 3

Damien
Damien

Reputation: 14057

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.

Upvotes: 1

Elzo Valugi
Elzo Valugi

Reputation: 27886

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

Upvotes: 0

Wolfr
Wolfr

Reputation: 5164

Try setting this instead of background-image:

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

Upvotes: 0

Related Questions