html img tag does not work with CSS sprite background

Question

I have the following image with sprite background:

HTML:

<li>
    <img class="imgicons icons22" align="absmiddle" src="">
    <a href="#"></a>
</li>

CSS:

.icons22 {
    display: inline-block;
    background-position: -114px -306px;
    background-repeat: no-repeat;
}
.imgicons {
    width: 16px;
    height: 16px;
    background: url('../images/main.png') repeat scroll 0% 0% transparent;
}

Output is :

enter image description here

How should I remove outline border from image? I have checked this in FF/Chrome.

The border is from the broken image (no valid SRC). Use another non-img tag, like the empty A tag right under it. — Diodeus - James MacFarlane, Mar 31 '14 at 20:45
Nope. @Diodeus is right. See fiddle: http://jsfiddle.net/gK7dP/ — GolezTrol, Mar 31 '14 at 20:49
possible duplicate of [Remove border around sprite image in Chrome](http://stackoverflow.com/questions/9172895/remove-border-around-sprite-image-in-chrome) and http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image — j08691, Mar 31 '14 at 20:50

score 1 · Answer 1 · answered Mar 31 '14 at 20:49

Try and change the img tag to a div. You can't have an empty image tag and then place an image into it's background... That's not how it works. Images as backgrounds belong in a Block element.

http://jsfiddle.net/gK7dP/4/

(I increased the size of the div to accommodate the large img, but you get the idea...)

ಠ_ಠ · Accepted Answer · 2014-04-01T07:18:09.217

You can stretch it out to fill space as needed:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII="

HTML:

<img align="absmiddle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=" class="imgicons icons22">

In demo border is none

DEMO

1x1 PNG Pixel generator

score 0 · Answer 3 · answered Mar 31 '14 at 21:01

Empty src doesn't mean empty image, it's invalid image (most likely, browser tries to load the same page again and display in as an image, which is impossible), that's why you get the broken image icon above the background. If you replace the empty string with some valid image URL (e.g. base64-encoded transparent pixel), it probably will be rendered as you want. But is img here really needed?

html img tag does not work with CSS sprite background

3 Answers3