Background image is not position well in IE 8

Question

nav li a.home                   { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}

nav li a.contact                { background:url('../img/custom_icons/email.png') no-repeat center; background-size: 32px 35px; background-position: 0px -1px; }

nav li a.show_all               { background:url('../img/custom_icons/slide.png') no-repeat center; background-size: 35px 50px; background-position: -5px -10px; }

#facebook {
    background: url(../img/custom_icons/facebook.png) no-repeat;
    background-size:30px 30px;
}

#sina {
    background: url(../img/custom_icons/sina.png) no-repeat;
    background-size:30px 30px;
}

I found that those background image in chrome / fx or other browser is perfectlly positioned, but not in IE 8 , it is either too small/ big or just move to other place.How to fix the problem and work just the same as other browser ? thanks

Updated : After adding ms filter, still not working?

nav li a.home                   { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale');

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

Here is the css file after adding the suggested filter. However, it still not working? Is it correct to place the code like this? it seems quite weird since there is an ; at the end and a " after ='scale') . Thanks

Are you sure IE8 understands all those css rules? `background-position` seems to be unsupported. I haven't run into this problem so I can't suggest a workaround but there might be something around. — frozenkoi, Jan 25 '13 at 02:25
i see. It seems background size and background position is not supported... What should i do eg. use img to replace the background? — user782104, Jan 25 '13 at 02:28
If the images are under your control you could modify them and avoid having to resize them with `background-size`. Also -ms-filter (or filter) go in the same place as other css rules go, i.e. `DIV {-ms-filter: "progid:DXImageTransform.blah(args)";}` — frozenkoi, Jan 25 '13 at 02:40

score 2 · Answer 1 · answered Jan 25 '13 at 02:26

2

"background-size" is not working on IE8.

http://caniuse.com/#feat=background-img-opts

answered Jan 25 '13 at 02:26

GeckoTang

2,697
1
16
18

is there any fix , or i should use img instead of background url ? thanks – user782104 Jan 25 '13 at 02:29
thanks for making the example, the img still not show as expected , it should be the problem of background size – user782104 Jan 25 '13 at 06:16

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

This answer here https://stackoverflow.com/a/6353808/358906 is probably better than my original answer below.

In IE8, make sure the browser mode is set to IE8 Standards, if it's not, change it and see if it solves your problem. If it solves the problem then you will need to enfore IE8 to always use the I8 Standards mode either by using meta tags or server headers.

edited May 23 '17 at 12:28

Community

1
1

answered Jan 25 '13 at 02:25

Nabil Kadimi

10,078
2
51
58

Thanks for the suggested solution, please have a look at my edited question. The code provided seems not functioning – user782104 Jan 25 '13 at 02:36
1

Have you tried **background: #fff url("../img/custom_icons/facebook.png") no-repeat center center fixed\0/;** – Nabil Kadimi Jan 25 '13 at 02:40

Background image is not position well in IE 8

2 Answers2