Hi Friends, Yesterday I was working on one wordpress site CSS in which I have to set some background image and its size, So we all know that it can be done by Background property of css, But after completing it when I checked it in Internet Explorer 7 and 8 I just felt that background-size property not working as it was not resizing bg image by given dimension. I thought I might did something wrong in CSS property So I checked syntax again but all was good and finally I confirmed when I checked in other browsers and it was working on all other browsers but not on IE.
So background-size is not working on Internet explorer, First thing i did is search on google because it was not a logical issue which can be solved by mind, It was IE issue and I knew that many people surely found this issue and must have any hack to solve this. I found many solutions to solve this and tried all. All solutions were pointed at same thing but none of them working perfectly for me. Finally I got one solution from microsoft website to add some css code to that css in which you are applying background-size. Below are code which you need to add to CSS.
First for example orignal CSS which not wokirng on IE :
.twitter-ico { background-image: url("images/twitter-ico.png"); background-size: 42px; background-repeat: no-repeat; }
In above code background-size will not work on IE. So below is solution for it :
.twitter-ico { background-image: url("images/twitter-ico.png"); background-size: 42px; background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/twitter-ico.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/twitter-ico.png', sizingMethod='scale')"; }
You can see in above code added 2 new lined of CSS property for IE. By adding this background-size will work for IE5.5+ Dont forget to change your image path in above code.. I hope this will help someone. Let me know if you have any other method to solve it, I will add it here in article under your name.
I am wordpress Developer, Hire WordPress Developer India and Hire WordPress Programmer. If you have any projects related to wordpress or PHP you can contact me.
7 Comments
this works only for the first image, im trying to do with 5 images and its doesnt seems to be working with the consecutive images
Its not working for me can you share a demo link ?
I have used the above code but it is not working in IE8. Can you give other solution for this?
Perfect, that makes things a lot easier. Thanks for the suggestion!
I have used the above hack it seems its working on my web site but I will come to know only 2morow when I will upload the page on the server
Hi, my dear thank’s, it’s the exactly Solution for this big problem…
i’m say again thank from Venezuela
You can also use background-size-emu pure JS library, that adds support of background-size to ie6, ie7, ie8 and ie9 in quirks mode.
It’s free and you can find it here: https://github.com/Metafalica/background-size-emu