CODEWITHSUNDEEP
htmlcss
Pink Code
Pink Code

Reputation: 1844

html img tag does not work with CSS sprite background

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.

Upvotes: 1

Views: 615

Answers (3)

ಠ_ಠ
ಠ_ಠ

Reputation: 1235

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

Upvotes: 1

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13546

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?

Upvotes: 0

Phlume
Phlume

Reputation: 3131

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...)

Upvotes: 1

Related Questions