title: jquery - picture element swap in ie 11
body: <p>Hi I am using a piece of jquery to swap background images via the picture element depending on viewport width. It works in mst browser except ie 11.</p>
  
  <p>Does anyone have an idea why? Help much appreciated. Thanks in advance.</p>
  
  <pre><code>function setImgBackground(){
  $('.banner-item').each( function(){
    var $this = $(this);
    var picture = $this.find('picture').get(0);
    var src = picture.getElementsByTagName('img')[0].currentSrc;
  
    $(this).css({
        'background-image':'url('+src+')'
    });
   });
  }
  
  
  &lt;ul class="bannerContainer"&gt;
  &lt;li class="banner-item full about"&gt;
  &lt;picture&gt;
    &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
    &lt;source srcset="https://via.placeholder.com/1664x412?
   text=desktop_1664x412" media="(min-width: 960px)"&gt;
      &lt;source srcset="https://via.placeholder.com/768x500?text=tablet_768x500"  media="(min-width: 768px)"&gt;
    &lt;source srcset="https://via.placeholder.com/414x500?text=mobile_414x500"  media="(min-width: 0px)"&gt;
    &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
    &lt;img alt="product" class="mobileBg"&gt;
  &lt;/picture&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is a link to the <a href="https://codepen.io/struthy/pen/YxeGer" rel="nofollow noreferrer">codepen</a></p>