无法删除图像上的边框-CSS

Question

I'm making a simple game for my coding course and have been stumped by this strange outline around my images. At first I thought it was Bootstrap 3, but when I plugged the bare bones into a jsfiddle I've got the same outline. Note that this is not the thumbnail border that gets set in thumbnail images. I've thought about overwriting some border @ rule but haven't a clue as to what to try.

I've redone the images thinking this might be some artifact of Inkscape, but nope. Any help in either removing the border or making it transparent would be appreciated.

css, note the commented out attempts:

#tommy img {        
    background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png); 
    height: 200px;
    width: 200px;      
  /*
  border: transparent !important;
  background: transparent;
  border-width: 0 !important;
  border: none !important;
  border: none;
  border: 0px;
  border-color: #7A45D2 !important; attempt to at least affect the darn thing.
  */
  }

and the bit of html:

<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img>
</div>

the jsfiddle is here: fiddle

Answer 1

HTML:

<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png">
</div>

CSS:

#tommy img {        
    height: 200px;
    width: 200px;
  }

Answer 2

The border is coming from you using an img tag without a src specified and the background set as an image. There are two ways you could fix this:

1) Keep setting the image via the background url, but use a different element (probably a div).

HTML:

<div id="tommy" class= "theGroup player-up">
  <p>Tommy</p>
  <div/>
</div>

CSS:

#tommy div {        
  background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);   
  height: 200px;
  width: 200px;
}

2) Keep using an img tag, but set the image via the src attribute instead of the background.

HTML:

<div id="tommy" class= "theGroup player-up">
  <p>Tommy</p>
  <img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png"/>
</div>

CSS:

#tommy img {        
  height: 200px;
  width: 200px;
}

Answer 3

Create a transparent gif and save it in your img folder. Then use this code. Works like a charm, gone are the ugly borders.

<div>
    <img src="img/transparent.gif" id="tommy" class="theGroup player-up">
    <p>Tommy</p>
</div>

#tommy {
    background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
    height: 200px;
    width: 200px;
}