Background cover - not working on ie

Question

I have a problem stretching a specific image to fit its parrent div.

On chrome/fire this works great.

On IE(I am using 11) this image does not stretch to its container.

I tried every example out there.

Please look at my code from plunker:

https://plnkr.co/edit/KHbgUXjDc349RpPgcWV9?p=preview

<div class="cls-1">
 <div class="cls-2"></div>
  <div class="lp__box-shadow icon-login_shadow"></div>
</div>

.icon-login_shadow {
    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A0.2%3Bmix-blend-mode%3Ascreen%3Bfill%3Aurl%28%23linear-gradient%29%3B%7D%3C/style%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22251.59%22%20y1%3D%22193.59%22%20x2%3D%22251.59%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.14%22%20stop-color%3D%22%232f343b%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%220.52%22%20stop-color%3D%22%23337082%22%20stop-opacity%3D%220.41%22/%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23369fb9%22%20stop-opacity%3D%220.73%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b1cf%22%20stop-opacity%3D%220.85%22/%3E%3C/linearGradient%3E%3Csymbol%20id%3D%22login_box_mirror%22%20data-name%3D%22login%20box%20mirror%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Crect%20class%3D%22cls-1%22%20width%3D%22503.17%22%20height%3D%22193.59%22/%3E%3C/symbol%3E%3C/defs%3E%3Ctitle%3Elogin%20shadow%3C/title%3E%3Cg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%3E%3Cg%20id%3D%22login_2%22%20data-name%3D%22login%202%22%3E%3Cg%20id%3D%22Login_background_window_copy%22%20data-name%3D%22Login%20background%20window%20copy%22%3E%3Cuse%20width%3D%22503.17%22%20height%3D%22193.59%22%20xlink%3Ahref%3D%22%23login_box_mirror%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') no-repeat center center;
     -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.lp__box-shadow {
    margin-top: 0.5em;
    height: 50px;
    width:100%;
}

.cls-1{
  width:50%;
}

.cls-2{
  border: 1px solid red;
  height:50px;
  width:100%;
}

EDIT: Who ever thinks its a duplicate, show it on the plunker, the "duplicate" not working in my case

Answer 1

use this:

background: url('url.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;