Desktop Image not ideal for mobile, how about replacing with alternate image?

Site URL: https://elancloe.com/

Hello!

I'm hoping someone can help with this:

I had a code that would replace the image block on my landing page with an alternate image when you viewed on mobile, but I had to make changes to it and now it won't work and it looks like this:  

Could someone help me with the code to make the below attached image appear when viewing my site on mobile, while keeping the original image the way it is on the desktop? Thank you so much in advance for your help! 

Hi,
Please contact me via DM to check it for you!

Best,
Leopold

On 1/31/2021 at 9:11 AM, PBP said:

Site URL: https://elancloe.com/

Hello!

I'm hoping someone can help with this:

I had a code that would replace the image block on my landing page with an alternate image when you viewed on mobile, but I had to make changes to it and now it won't work and it looks like this:  

Could someone help me with the code to make the below attached image appear when viewing my site on mobile, while keeping the original image the way it is on the desktop? Thank you so much in advance for your help! 

 

 

Design is switch to background image, so you use this, remember to replace the image url

@media screen and (max-width: 767px) {
  section[data-section-id="60158a57b6ec6f5af0b86d91"] .section-background img {
    opacity: 0;
  }
  section[data-section-id="60158a57b6ec6f5af0b86d91"] .section-background {
    background: url('https://content.invisioncic.com/p289038/monthly_2021_01/1971123509_ElanCloeBanner4mobileComplete.thumb.png.f19d42b7a48c48db7cd9376a9373f3c5.png');
    background-size: cover;
    background-repeat: no-reapeat;
  }
}

Perfect! Thank you!