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;
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.
IE background size not working
since background-size is CSS3 specific your gonna have to use 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;}
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)...
background size cover IE11 not covering full area
I've managed to fix the issue by applying the following CSS. I'm not a 100% happy with it, but it'll have to do.
If anyone runs into the same issue, test this fix, it may work depending on your scenario, maybe it won't.
.bg {
...
background-size: 100% 100%;
}
Holy crab-shoe on a stick ... well, this is kinda embarrassing.
The problem was: IE was zoomed out.
The solution: zoom in.
The CSS was working fine all along.
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
Background size not working from common class is it needs any workaround
Here is a stripped down example to fix your issue. The problem is with using the background
property under a more specific selector. background
sets the background-size
property to it's default when you don't specify a value for it.
Changing your specific icons to use background-image
and background-repeat
directly fixes this.
div.icon-holder {
width: 150px;
height: 150px;
border: 1px dashed;
}
div.icon {
padding: 75px;
background-size: contain;
}
div.icon.blue {
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Lightblue.svg/900px-Lightblue.svg.png);
}
<div class="icon-holder">
<div class="icon blue"></div>
</div>
Related Topics
How to Add Background Images in a Jsf Application Using Richfaces and CSS
How to Set a Flex-Container to Be the Width of Its Flex-Items
CSS Font-Size Changes When Font-Family Falls Back
How to Create a CSS3 Gradient in Opera
Center Twitter Bootstrap 3 Glyphicons in Buttons
What Does the Selector [Class^="Span"] Do
Ie: Nth-Child() Using Odd/Even Isn't Working
React Animate Transition Between Components
Bootstrap SASS Variable Override Challenge
How to Set CSS Only for Specific Ie Browsers
How to Stop User Agent Stylesheets from Overriding My CSS
Twitter Bootstrap 3 How to Activate Navbar-Collapse on Small Devices
How to Define a Less Mixin to Generate a Transition-Property with a Variable Number of Parameters
Is There Any IE8 Only CSS Hack
Why Does Grid-Gap Cause an Overflow
Does Anyone Know How Pinterest.Com's Layout Works
What Happens If Multiple Classes of the Same Element Define a :Before Pseudo-Element