background-position not applied on IE - css

Question

Setting a background position works on Chrome, Safari and Firefox, but not on IE 8-11. What's wrong here?
DEMO on Dabblet
DEMO on Webdevout
.logo {
display: block;
width: 200px;
border: 2px solid red;
background: url("layout/logo.png") center right no-repeat; /* fallback image */
background-image: url('data:image/svg+xml;base64,...'), none; /* two bg to only use svg on supported browsers. IE 11 uses this image */
background-position: center right;
background-repeat: no-repeat;
background-size: auto 100%;
}
UPDATE:
IE seems to ignore background positioning on SVG images. Here's a WORKAROUND DEMO

Answer 1

I guess the best way of doing this with a guaranty of cross-browser working is by making the background image using a pattern and then set the attributes like x,y,width or height to position it as you want directly or later in jquery via the attr method for example: $("#img1").attr("width","500");
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
and set the pattern to fill the SVG path like this
<path fill="url(#img1)" id="my_svg" d="M5,50 l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"/>
or you can set the background in this very way but in the CSS like this
#my_svg{
fill:url(#img1);
}
There is also an alternative way which i do not recommend but may be the answer in some cases and that is the transform="translate(x,y)" for the image in pattern or the patternTransform="translate(x,y)" for the pattern which is quit like the css version if it..for example:
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100" patternTransform="translate(0,0)">
<image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" transform="translate(0,0)" />
</pattern>
anyway there is always good practice to know many different ways of doing something in our job to be able to survive ;-)