background-size is not working in IE8
IE8 does not support background-size property.
try out this polyfill from github.
Using this should allow you to use background-size property in IE8 without any issues.
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;
}
How do I make background-size work in IE8?
This question got answered intensively here:
How do I make background-size work in IE?
The most popular fix is this background-size polyfill:
https://github.com/louisremi/background-size-polyfill
CSS background-size not working in IE7/8
That's because background-size
is a CSS3 property which isn't supported before IE9.
However, there is a thread which suggests a possible workaround:
How do I make background-size work in IE?
Background-size 100% not working in IE8 and IE7
since background-size is CSS3 specific which is not supported to IE you have to do something like this for it to work in IE
set your html and body to
html {overflow-y:hidden}
body {overflow-y:auto}
wrap the image you want fullscreened with a div #page-background
#page-background {position:absolute; z-index:-1}
then put this in your html file
<div id="page-background">
<img src="/path/to/your/image" width="100%" height="100%">
</div>
** you will have to use some sort of reset to remove the margins and paddings, something like this
html, body {height:100%; margin:0; padding:0;}
Background Not Stretching in IE8
Using an img
with one of the method detailed here: Perfect Full Page Background Image can be compatible with IE8+ or IE7+.
Otherwise it's not that important if your particular browser doesn't understand this or that (except if it's the most important aspect of your page, but it shouldn't be so for a background image). Progressive enhancement and graceful degradation are cool ;)
Related Topics
Difference Between Visibility:Hidden and Display:None
Align Child Elements of Different Blocks
Css3 Background Image Transition
I Do Not Want to Inherit the Child Opacity from the Parent in Css
Bootstrap Align Navbar Items to the Right
What Does the CSS Rule "Clear: Both" Do
How to Combine a Background-Image and Css3 Gradient on the Same Element
Import Regular CSS File in Scss File
Fixed Position But Relative to Container
Margin on Child Element Moves Parent Element
Can CSS Detect the Number of Children an Element Has
How to Really Isolate Stylesheets in the Google Chrome Extension
Does "Display:None" Prevent an Image from Loading
How to Make Twitter Bootstrap Menu Dropdown on Hover Rather Than Click
::Slotted CSS Selector For Nested Children in Shadowdom Slot