javascript - Dynamically change image depending on screen resolution - Stack Overflow

<script type="text/javascript">

var imageBgs = document.querySelectorAll('[data-bg]');
var screenWidth = window.innerWidth;

for(var i=0; i<imageBgs.length; i++) {
    if( screenWidth < 768 ){
        // Load mobile image
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-mobile')+')';
    } else if( screenWidth >= 768 && screenWidth <= 1024 ) {
        // Ipad
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-tablet')+')';
    } else {
        // desktop image
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-desktop')+')';
    }
}

</script>