Reputation: 2552
I need to remove border/outline ( I don't know what exactly is ) from an image loaded in Span using CSS.
This is the HTML code:
<div>
<span class="BG"><img class="EU"></span>
</div>
And this is the CSS:
.BG{
background-color: #017b5b!important;
display:block;
}
.EU{
background-image: url('http://bet.dn1.it/images/broker.png');
background-position: -190px -362px;
width: 189px;
height: 50px;
display:block;
margin:0 auto;
}
You can find the example here: JsFiddle
Thank you very much to support.
Ciao
Upvotes: 0
Views: 1507
Reputation: 439
So there are two things that you can do.
1. If you must use the <img>
tag you can create a blank.gif (1px x 1px) transparent image and set the source to blank.gif <img src="blank.gif" class="EU">
2. As everyone else has said you can just change your <img>
tag to a <span>
or <div>
The default behavior of an <img>
tag that does not reference an image or a valid image is to set a border around it. There does not seem to be a way to remove this border.
Upvotes: 1
Reputation: 7246
Since you are using background-image, change the html element. You can use a span for example.
JSFIDDLE
https://jsfiddle.net/3vwjc26t/
<div>
<span class="BG"><span class="EU"></span></span>
</div>
Upvotes: 2
Reputation: 855
This is because you are using a <img>
element without a src
attribute, since you are using CSS to add it as background-image
you should switch to a different element type like a <span>
or <div>
.
Like so:
<div>
<span class="BG"><span class="EU"></span></span>
</div>
Upvotes: 2
Reputation: 547
You dont need an img tag for this. Just use a div.
<div>
<span class="BG"><div class="EU"></div></span>
</div>
Upvotes: 2