removing img border

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

Set your <img> source to transparent.

#img {
  width:150px;
  height:auto;
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;
  background-size: cover;
}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

it's the border of alt text, try

img {
  text-indent: -999px;
}