IE8 fix for background-size property? Retina Image
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;
}
CSS property background-size with ms-filer not working in IE8
Background-size is not supported in IE8 as you can see here:
http://caniuse.com/background-img-opts. I'm not a big fan of css filters.
If you would like a fullscreen background image i suggest to use one of the following solutions:
http://css-tricks.com/perfect-full-page-background-image/
background-size not working in IE
background-size
is a CSS3 property which isn't supported on IE8 and below.
You can also try this:
background:url(../siteImages/top_bar.png) 0 0 / auto 43px repeat-x fixed;
How to make background-size work in IE8?
The point is Retina screens, right? Since the market share of that kind of screen isn't that big, I would prefer using a "standard" image first and then replace it by a high-resolution if needed.
You can do it with Retina.js for example.
Or you can simply use an image tag instead. It will work on IE8. Don't forget to define the width & height properties.
<a href="/" class="logo">
<img src="img/logo.png" width="190" height="204" alt="Bryuvers">
</a>
Retina images in IE 8 not scaled properly
max-width: 100%;
did the trick.
web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?
You can use a filter
: http://jsfiddle.net/thirtydot/QTT4N/3/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
sizingMethod='scale');
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Can I implement a CSS-only fallback for background-size?
A CSS-only fallback for background-size
is tricky, but yes it can be done.
The trick is to use the short-form background
style to set the various background properties, rather than using the individual styles like background-size
, background-image
, etc.
So in your case, you would have something like this:
background: url(img2x.jpg) 0% 0%/100%;
(The 0% 0%
is for background-position
(0% 0% is default) which is required before the background-size
value when using the short-form style).
So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size
will throw away the whole line, rather than just throwing away the background-size
on its own.
This means that we can specify an entirely different set of background values for older browsers.
background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/
You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size
setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.
Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.
So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size
.
Hope that helps.
[EDIT]
Browser compatibility may be a minor issue here. Some browsers may support background-size
but not support it as part of the background
short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size
.
This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.
In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.
In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.
Related Topics
Google Chrome "Failed Parsing Sourcemap":Css.Map (Web Essential)
Validationsummary and Validationmessagefor with Custom CSS Shown When No Errors Present
CSS Issue on iPad with Table Border
Spring MVC Where to Put CSS/Js/Img Files
How to Add Custom CSS in Wix Website
Is There a Maximum Length for the Class Name in CSS
Display the Image in the Center of the Page
How to Position a CSS Triangle Using ::After
How to Ignore Certain Less Files in Web Essentials Less Compiling? (Bootstrap)
Changing Comment Colour in Atom Editor
What Does the Scalez() CSS Transform Function Do
Blurry Background Images After Update to Ie11
Set Color for Extra Page Parts Visible During Rubber Band Scroll
Vertically Aligning a Checkbox
How to Specify the Maximum Number of Columns Repeat() Will Create Using Auto-Fit/Fill