Internet explorer background-position and background-size by AngularJS

Question

I would like to have a div which contains an large image scaled down and aligned similar to the JsFiddle below. The jsfiddle below works for me in Chrome, Firefox and IE10.

    .backg{
    background-image:url('http://www.libpng.org/pub/png/img_png/pnglogo-blk.png');
    background-repeat:no-repeat;
    background-position:50px 50px;   
    background-size:80%;
    height: 400px;
    width: 400px;
    border: 1px solid #000;
    padding: 5px;
 }

http://jsfiddle.net/3sszy56z/

When I run the same code on my local machine in my project the background-size and background-position attributes are respected and it works.

But if I try to set these values using AngularJs $scope variables it is not working in IE10, Firefox and Chrome still work fine. My code then looks like this:

   <div style="width: 500px;
        height:400px;
        border:1px solid #b8b8b8;
        overflow:hidden;
        background-image:url('../../images/06.png');
        background-repeat:no-repeat;
        background-position:{{panhorizontal}}px {{panvertical}}px;
        background-size: {{zoom}}%;">
   </div>

Any suggestion on why this does not work in only IE?

Here is a JSFiddle with Angular Example: http://jsfiddle.net/Lgrc9fj1/

Answer 1

dont use style

<div style="***">
</div>

this will not work in IE

use ng-style

<div ng-style="{'width': '500px',
'height':'400px',
'border':'1px solid #b8b8b8',
'background-image':'url(http://www.libpng.org/pub/png/img_png/pnglogo-blk.png)',
'background-position-x':panhorizontal+'px',
'background-position-y':panvertical+'px',
'background-size': zoom+'%',
'overflow':'hidden',
'background-repeat':'no-repeat',    
'float':'left'}"></div>

here is the modified JSfiddle

http://jsfiddle.net/Lgrc9fj1/4/