background-size doesn't work in IE

Question

I'm using this class and this id (for instance) to add a picture on one div :

.icones { 
    background: transparent url('../contents/homepage/60/icones.png') no-repeat;
    display: inline-block;
    width: 50px;
    height: 48px;
    background-size: 60px;
}
#contact {
    background-position: 0px -60px;
}

With Chrome, everything is ok, all looks great and all properties are shown in the element inspector, but in IE, there is a problem.

On inspecting the page with a developper tool on IE, I saw that "background-size" doesn't appear.

I know that it's that problem that gives me the trouble because when I hide it on chrome I have the same page than in IE.

So my question is: How can I force IE to apply this background-size?

THANKS!

EDIT :

So even with the filter, it doesn't seems to work:

    .icones { 
        background: transparent url('../contents/homepage/60/icones.png') no-repeat;
        display: inline-block;
        width: 50px;
        height: 48px;
        background-size: 60px;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact {
    background-position: 0px -60px;
}

Solution :

Edit the pictures size manually and forget the background-size. All is okay!

@clement, your question already has a solution. Check the link above. Also next time before you ask a quesion in SO make sure its not asked before — AnaMaria, Jul 31 '13 at 14:07
@MrLister : Thanks for your advice but I already tried that solution :-/ — clement, Jul 31 '13 at 14:36
@Anamaria : Thanks but it doesn't work for the moment I probably made a moistake, I edit my initial post ;-) — clement, Jul 31 '13 at 14:37
@Anamaria : my problem is about the background-size! I resize the background before making the sprite! — clement, Aug 01 '13 at 10:07

score 0 · Answer 1 · answered Jul 31 '13 at 14:07

0

For IE you have to use a specific css filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale')";

Or use jquery to achieve the effect, like it is explained in this link.

answered Jul 31 '13 at 14:07

António Regadas

714
4
11

Thanks Antonio . I made it but it doesn't seems to work in my project (see my updated initial post) – clement Jul 31 '13 at 14:58

background-size doesn't work in IE

1 Answers1