Background size 100% auto not working in IE 10

Question

I've got some layers of divs with svg backgrounds. Set at 100% width and auto height:

  <div class="group section hot-bonus">
    <div class="layer layer-base clouds"></div>
    <div class="layer layer-back1 clouds-1"></div>
    <div class="layer layer-back2 clouds-2"></div>
    <div class="layer layer-back3 clouds-3"></div>
    <div class="layer layer-back5 bg"></div>
  </div>

The .group has these styles:

height: 65%;
z-index: 8;
text-align: center;

All of the clouds follow this format:

.clouds {
    z-index: 6;
    background: url(../images/hot_bonus_clouds.svg) center bottom no-repeat;
    background-size: 100% auto;
    @include transform( scale(1.1) );
}

The result is this (full width browser screenshot): enter image description here

However, I can't seem to get it working on IE10. This is what it's giving me (never mind the design/layout differences, just the unstretched cloud backgrounds):

enter image description here

And this is despite IE10 showing that they have the style background-size: 100% auto; applied.

Any ideas what's going on?

Is the .clouds container and any parent containers set to 100% width? It might be better if you showed more of your code structure. — crazymatt, Oct 28 '14 at 17:07
I've updated the OP a little, let me know if you need anything else. — styke, Oct 28 '14 at 17:11
http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10 — Christina, Oct 28 '14 at 17:31

score 2 · Answer 1 · edited May 23 '17 at 12:27

Answer found here: https://stackoverflow.com/a/22970897/1192861

Be sure that your SVG has a width and height

I generated my SVG's from illustrator, I had to open them up again and set a width/height for each one. A really quick way to set it was to pay attention to this part of the svg element:

viewBox="0 0 1428.5 521.8" where 1428.5 is the width and 521.8 is the height. So the fix makes sure the SVG element looks something like this:

<svg viewBox="0 0 1428.5 521.8" width="1428.5" height="521.8"....>/***/</svg>

Background size 100% auto not working in IE 10

1 Answers1