DarioN1
DarioN1

Reputation: 2552

HTML/CSS Remove Border (or Outline) from Image loaded in SPAN with CSS

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

Answers (4)

bnjmn.myers
bnjmn.myers

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

Alessandro Incarnati
Alessandro Incarnati

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

Callum
Callum

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>

Edited Fiddle

Upvotes: 2

lopezi
lopezi

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

Related Questions