バックグラウンドカバー - 作業中ではありません。

Question

特定の画像をパーレンティブDIVに合わせて伸ばすのに問題があります。

クロム/火の場合、これは素晴らしいです。

IE（11を使用しています）では、この画像はコンテナに伸びません。

私はすべての例を試しました。

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： 史上重複を考えて、plunkerでそれを示して、私の場合で働いていない "複製"

Answer 1

使用この：の

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