title: IE 11 :after background size not working
body: <p>I added a background-image inside the pseudo :after</p>
  
  <pre><code>::after {
    content: '';
    display: block;
    position: absolute;
    right: -2.5rem;
    bottom: -1.5rem;
  
    height: 9.5rem;
    width: 9.5rem;
    background-image: url('../img/icons/icon_logo.svg');
    background-repeat: no-repeat;
    // background-size: 100% auto;
    background-size: cover;
  }
  </code></pre>
  
  <p>But the image is way bigger than the actual size of the box.</p>
  
  <p>Any idea how to solve this?</p>
  
  <p>(Working fine in webkit browsers)</p>
  
  <p><strong>!!!Additional Information:</strong></p>
  
  <p>I tried other svg and it works great.</p>
  
  <p>Works: </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"&gt;
    &lt;path fill="#FF6C00" d="M0 0h64v64H0z"/&gt;
    &lt;path fill="#FFF" d="M33 0C22 0 13 9 ..."/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Does not work:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"&gt;
    &lt;path fill="#FFF" d="M0 0h64v64H0z"/&gt;
    &lt;defs&gt;
         &lt;path id="a" d="M0 0h64v64H0z"/&gt;
    &lt;/defs&gt;
    &lt;clipPath id="b"&gt;
         &lt;use xlink:href="#a" overflow="visible"/&gt;
    &lt;/clipPath&gt;
    &lt;path fill="#277052" d="M43.7 51.8s-...."/&gt;
    &lt;defs&gt;
         &lt;path id="c" d="M0 0h64v64H0z"/&gt;
    &lt;/defs&gt;
    &lt;clipPath id="d"&gt;
         &lt;use xlink:href="#c" overflow="visible"/&gt;
    &lt;/clipPath&gt;
    &lt;path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/&gt;
    &lt;path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/&gt;
  &lt;/svg&gt;
  </code></pre>