How do I make background-size work in IE?
A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
However, this scales the entire image to fit in the allocated area, so if you're using a sprite, this may cause issues.
Specification: AlphaImageLoader Filter @microsoft
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
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;
CCS3 background-size:cover not working in IE
I came across this as well and found that giving body
any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh
should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
IE11 wont background-size: cover
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
fixed the issue.
Code would work on local machine,jfiddle and codepen but when uploading the site the above code needed to be added to display correctly.
Related Topics
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
Align Mat-Cards Content (Image, Text and Buttons)
Bootstrap 4 Carousel Responsive (Image and Text)
How to Prevent Long Words from Breaking My Div
Make a Div Span Two Rows in a Grid
Margin on Child Element Moves Parent Element
Select Every Nth Element in Css
Difference Between Normalize.Css and Reset Css
How to Change Whole Page Background-Color in Angular
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
Make Nested Div Stretch to 100% of Remaining Container Div Height
How to Word-Wrap Long Words in a Div
Vertical Align Center in Bootstrap 4
What Does !Important Mean in Css