Using different background images for desktop/mobile display on blocks - widgets

Question

I created a block and a widget in magento 2.4 page top to display as a banner promotion, but i want a different display for desktops and different for mobile.

what i have tried:

<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/desktop.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>

The above code does not display well on mobile.

my question how do i define a different background image for mobile or tablets.......???

what i tried:

@media (min-width: 481px) and (max-width: 1024px) {
    body {<div style="padding: 14px; text-align: center; background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
    }

Answer 1

You need to do the following things.

1. Create one class and assign to that div. let say we can create class with name "mydemoclass"

.mydemoclass 
{  
    background-image: //PATH FOR BACKGROUNG IMAGE FOR DESKTOP;
}

//On screens that are 768px or less// 
@media screen and (max-width: 768px) 
{   
    .mydemoclass 
    {
           background-image: //PATH FOR BACKGROUNG IMAGE FOR TABLET;   
    } 
 }

 //On screens that are 360px or less// 
 @media screen and (max-width: 360px) 
 {   
     .mydemoclass 
     {
          background-image: //PATH FOR BACKGROUNG IMAGE FOR MOBILE;   
     } 
 }