Mike Duister Mike Duister - 28 days ago 6
Sass (Sass) Question

Why is background image not repeating on ^IE9

I've created a transition between sections on my page, I wanted to keep this as structured as possible. Now the problem is that the background image is not repeating on IE9, IE10 and IE11 (tested these)

css of transtition:

.transition {
position:absolute;
z-index: 100;
width:100%;
height: 50px;
background-size: auto 100%;
background-repeat: repeat-x;
bottom:-1px;
background-image: url(../img/transition.svg);
}


It does work on safari, chrome, firefox (newer versions)

Answer

When I had to achieve this previously, I found this post. It states the following:

For whatever reason, Internet Explorer 10 does not support the repeating of SVG-based background images out of the box.

However it is possible to resolve this:

We need to make Internet Explorer 10 preserve the aspect ratio by slicing the image accordingly. For this to happen, preserveAspectRatio="none slice" should be added to the <svg> like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve" preserveAspectRatio="none slice">

(This is also true of IE 9 and IE 11 also)

In IE9 (the browser I've been using) this stretches the svg across the length of the screen because the background-size width is set to 100%.

Therefore you'll need to set the background-size to the size of the image you wish to be repeated. For example when I was testing, I set my background-size to be 40px 50px this set the svg to a 40px by 50px image and then repeated it across the width and height of the div.

Comments