CODEWITHSUNDEEP
htmlcss
MIke
MIke

Reputation: 619

Img class with image bg remove border

I have a img class with a background image and I has a unusual gray border on it making a box. I want to remove the border but having a border:0px doesn't solve the problem.

I Provided a fiddle to replicate my work. Fiddle Here

.facebook {
  background: url(http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png);
  background-size: 50px 50px;
  border: 0px;
  width: 50px;
  height: 50px;
}
<img class="facebook" alt="Facebook Logo" />

Upvotes: 3

Views: 88

Answers (1)

Alex Char
Alex Char

Reputation: 33218

It's the default border that appears when you use an img element with an a src attribute set to something that doesn't exist or doesn't has a src. Just use src attribute:

.facebook {
  width: 50px;
  height: 50px;
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.facebook:hover {
  opacity: 0.2;
  filter: alpha(opacity=20);
}
<img class="facebook" alt="Facebook Logo" src="http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png" />

Upvotes: 3

Related Questions