Menu
I know that the IE7 does not support background-size cover.
I searched the web for some solutions, but the only thing i've got is that I should put a img with width: 100% and height:100% and put it as the background.
Is this the only solution? I've seen some solutions with -ms-filter but it didn't work. Does anybody have another solution?
1 special thing:
I have more than 1 div wich has this background-size cover property.
In firefox everything works (how surprising).
Edit1: My Code looks like this:
<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>
641
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
Using Modernizr you can discover what the user's browser is capable of.
Install Modernizr by linking it in your header
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
And in your HTML tag,
<html class="no-js">
Using CSS you can style your page as the browser supports it - Check the documentation for what detection is supported. In this case, we want the background-size class
In your CSS file - For browsers without background-size (AKA just IE)
.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}
and this for browsers that do:
.background-size #image{
background-image: url(lol.png);
background-size: cover;
}
Using this method is more standards compliant, because in the future tags such as min-height: 100% could become unused.
123
Check this post for an answer:
How do I make background-size work in IE?
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
Works perfectly in IE8
41
Give your image a class of streched (or whatever else) and in your css put this :
img.stretched {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Be sure to put your img tag right below the <body> tag.
4
I've written a plugin for this:
https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin
<div style="width: 400px; height: 300px;">
<img class="background-size-cover" src="apple.jpg" />
</div>
<script>
$(document).ready(function() {
$('.background-size-cover').bgdSize('cover');
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
