CSS3 IE9 background-size: cover; doesn't always work
Question
This is killing me, i have a background picture that is doing full screen using background-size: cover;. And to my understand IE9 supports this. Whats killing me is some IE9 browsers are handling this and some IE9 browsers are not.
Anybody experience this before?
4 answers
solution1
2 2014-04-17 20:25:59
I have the same problem and i fix it with this declaration in the <head /> :
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=8; IE=9"> .
solution2
1 ACCPTED 2013-04-11 20:41:20
some IE9 browsers are handling this and some IE9 browsers are not.
Please make sure your Browser Mode and Document Mode is IE 9 . Using F12 developer tools.
solution3
0 2013-09-25 21:04:43
I know its old, but i had this problem today and it was killing me too.. but i found a solution:
Check if you have the tag <!DOCTYPE html> in your first line, if you forget that it can make your css3 looks real bad on IE9.
Thanks!
solution4
0 2015-01-13 13:26:27
That worked!!!
Putting <!DOCTYPE html> as the first line resolved the IE 9 problem (worked before OK with Chrome and IE 10). You can see the result of the following code on my page at http://www.cgmdesign.net (background photo is mine).
<style>
body {
background: url('images/golf3.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.