background-size doesn't work in IE [duplicate] - css

This question already has answers here:
How do I make background-size work in IE?
(8 answers)
Closed 9 years ago.
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!

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.

Related

IE 8 Bug not displaying background

A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks

progid filter isn't running

I'm using a filter to the older IE on my sprite, so I used the filters.
The code below isn't working. I know I made a mistake I don't know wich one / where:-/
On Chrome it's ok, the properties is disabled but in IE, the background-size isn't working.
If I disable the "background-size" in Chrome, I see the same BAD screen as in
.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 -350px;
}
Thanks for your help :-)
background-size: 60px; wasn't applied on IE, so I deletes this line and I made a picture of 60px. This solved my question.

CSS - Firefox background position doesnt work for me

I am trying to make work background position in Firefox, but no success. In google chrome it works.
Here is my css that works in google, but Firefox doesnt accept background-position-y: 37px;
{
padding-top: 14px;
height: 50px;
background: url('image.png') repeat-x;
background-position-y: 37px;
text-align: center;
}
There is no such thing like cross-browser background-position-y. It simply doesn't work everywhere and therefore shouldn't be used. You have to set both parameters in background-position.
Please have a look at this thread: background-position and links I referred to in my answer
Firefox does not know a background-position-y property.
Try to use the regular background-position with two arguments:
background-position: 0% 37px;

IE8 fix for background-size property? Retina Image

I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.
Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?
CSS:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
}
HTML
<div class="arrow-big-right"></div>
Can someone explain how I fix this for IE?
Many thanks for any help :-)
IE8 and below simply don't support background-size so you're either going to have to use the AlphaImageLoader Filter which has been supported since IE5.5:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
Or use some method of targeting IE versions via CSS to apply an alternative to your background for IE8 and below users.
It's also worth noting, as Matt McDonald points out, that you may see two images as a result of using this technique. This is caused by the IE filter adding a background image in addition to, instead of replacing, the standard background image. To resolve this, target IE via css using your preferred method (here's a method, my personal favourite) and remove the standard background-image for IE8 and below.
Using the first technique from Paul Irish's blog post to do this, you could use the following:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
.ie6 .arrow-big-right,
.ie7 .arrow-big-right,
.ie8 .arrow-big-right {
background-image: none;
}

Footer display problem in Internet Explorer 7

It is bit weird scenario to explain it in words. The footer of site I'm working on looks good on most of the browsers except IE7. Below are the screenshots will give you the idea.
IE8/FF/Chrome
IE7 (moved half screen right)
The footer has following CSS. When I remove the CSS it displays fine.
#footer-holder
{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
*border: none;
z-index: 10000;
height: 30px;
/* For WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(0,100,255,0.70)));
/* For Mozilla */
background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,100,255,0.70));
/* For lt IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF);
/* For gt IE8 */
background: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF)";
}
I am tired to making it compatible with IE7. Any idea what might be causing the issue?
Resolved the issue. I had to mention left: 0px;. And now it is looking great on IE7. :)
Try <!DOCTYPE html> at the top of your html..
Remove the * next to *border: none;

Resources