0

I'm having issues with the following placeholder background: 

http://192.154.143.220/~capeannapparel/

Here's a fiddle: http://jsfiddle.net/PVXx8/

It has to be responsive and scale according to the browser window. It works in Chrome and FF but not IE.

I know IE has problems with background-size: cover; I was wondering what the best way is to make it work for IE? I tried various snippets of code on the web like:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Background.jpg', sizingMethod='scale')";

but that didn't make a difference. Do I have to use jquery or something more complex or can this be done with CSS?

If anyone has any ideas, I'd greatly appreciate it!

Thanks!

milk
  • 434
  • 2
  • 6
  • 20
  • possible duplicate of [How do I make background-size work in IE?](http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie) – showdev Jun 30 '14 at 18:11
  • Thanks, but the filter code still doesn't work for me. IE shows a big gap at the bottom of the image and a scroll bar. Same with all the other bits of codes that have been posted in that thread. – milk Jun 30 '14 at 18:27
  • Which version of IE are you using? – showdev Jun 30 '14 at 18:32
  • Version 11. Tried playing with it in developer mode but it still shows a scrollbar and a big grey box on the bottom – milk Jun 30 '14 at 18:38

2 Answers2

0

try an if only IE stylesheet and add the following...

 background-size:auto 100%;
 overflow: auto;
Mudassir
  • 1,136
  • 1
  • 11
  • 29
0

Here is how I do it and it should work in all browsers:

-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
background-size: cover;
Chris Love
  • 3,740
  • 1
  • 19
  • 16