CODEWITHSUNDEEP
htmlimagecss
TheUnknown
TheUnknown

Reputation: 39

how to remove white border using img tag

I can't find solution for this.

Problem

How to remove that white border around the triangle?

Code: 

.triangle{
    background: url('/img/triangle.png');
    background-size: cover;
    width: 15px;
    height: 15px;
    margin:0px;
    padding:0px;
    border: none;
}

<img class="triangle" />

Upvotes: 1

Views: 7866

Answers (3)

andreas
andreas

Reputation: 16936

Your markup isn't valid. The white border comes from your browsers Image not found visualization. To correct your markup, either set a src attribute to the image itself (it's mandatory, see MDN):

<img src="/img/triangle.png" />

or replace it by a div with the given background property, like this:

.triangle {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png');
  background-size: cover;
  width: 15px;
  height: 15px;
  margin: 0px;
  padding: 0px;
  border: none;
}
<div class="triangle"></div>

Upvotes: 9

joeldesante
joeldesante

Reputation: 244

If your going to use the img tag for this task do

<img class="triangle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png" />

it should fix your problem... Otherwise do exactly what did but make that img tag into a div.

Upvotes: 2

sammyb123
sammyb123

Reputation: 493

I would also look into "outline" and "outline-color" properties to either style it or make it disappear.

Here is more information:
http://www.w3schools.com/cssref/pr_outline-color.asp http://www.w3schools.com/cssref/pr_outline.asp

Upvotes: 0

Related Questions