1

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?

  • not sure if this helps http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – Brock Hensley Apr 11 '13 at 20:40
  • Hello @Mike, if you had found that any of the answers is good for your question, please mark it as 'accepted', so the question is closed, as it is recommend in the StackOverflow user guide. See the [StackOverflow Wiki](http://stackoverflow.com/help/someone-answers) mentioning it. – Giacomo Paita Aug 01 '14 at 23:56

4 Answers4

2

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">.

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
1

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.

Sachin
  • 40,216
  • 7
  • 90
  • 102
  • Okay but I cant really force outside users to do this –  Apr 11 '13 at 20:42
  • is there a way to force that server side? –  Apr 11 '13 at 20:43
  • no you can't. in that case you need to handle it for older version's of IE as well. `background-size: cover` is CSS-3 property. so older broswer doesn't support it. so you need to do workaround for it – Sachin Apr 11 '13 at 20:44
  • Sachis okay so what would background-size: cover; be for older versions? –  Apr 11 '13 at 20:45
  • You can use filter for IE. Here is good link to get it http://css-tricks.com/perfect-full-page-background-image/ – Sachin Apr 11 '13 at 20:47
  • Thanks again Sachin but i'm not doing a perfect full screen image, just partial screen thats a full image i'll play around with ut –  Apr 11 '13 at 20:50
  • yes mike, they have applied those properties to `html` and `body`, you can do same for your elements – Sachin Apr 11 '13 at 20:53
0

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!

lucasumberto
  • 134
  • 1
  • 9
0

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>
Carlos Martins
  • 1