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

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

Answer 2

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 3

Try setting this instead of background-image:

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

Answer 4

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 5

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.

Answer 6

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.