SweerAlert2 - How to change responsive image in alert

Question

I have this SweetAlert2 JavaScript:

$(document).ready(function(){

swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 }); 

});

This script works fine in desktop screens - but as IMAGE1 has 600x600 pixels - it will be big for mobile devices.

Then I need to change the image to IMAGE2 (with a small width) to make it works at small devices.

any idea?

Answer 1

best solution that I found:

split the screen resolution via JavaScript and add a CSS control for small-devices

$(document).ready(function(){

if (screen.width > 800) {
swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE2.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 }); 
}
if (screen.width >= 800) {
swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false, 
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg) 
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 }); 
}
});

and CSS:(sweetalert2 demands the height control via css)

.swal-height {
    height: 600px;
    width: 600px;
}

@media (max-width: 800px) {
  .swal-height {
    height: 300px;
    width: 300px;
}
}