Different background image for mobile and desktop sites

Hi there,

I am very new to this and have started editing a website before it goes live (still in private mode). 
I have an image for a desktop homepage but I would like to use a different one entirely for the mobile site so both images are optimised for there uses. I've tried doing this using the code below but because I am css illiterate I've definately done something wrong or don't know how to execute this: 
I should mention I have the 'Personal Plan' so not even sure this is possible on my pricing plan.

#collection641d0a0bcf5c9a4e1bcf01cd{
 @media only screen and (max-width:640px){
  #page .page-section:nth-child(1) .section-background img {
    opacity:0;
  }
  #page .page-section:nth-child(1) .section-background {
    background-image:url('https://static1.squarespace.com/static/641d0a012778260787f58e9f/t/64262a63c2164f7747509f3c/1680222828133/mobile+background+final.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 }
}
 

any help would be greately appreaciated. thanks, Ryan 🙂

You can setup password & share url, we can help easier

Hi Tuanphan, 

sorry for the slow reply I have resolved this 🙂

thanks,

Ryan

Hi Tuanphan,

Sorry I thought I resolved this but am still having issues. 

I have an image for the desktop homepage but I would like to use a different one for the mobile site (different size) so both images are optimised for the screen size. Is there a way to do this please?

in the attachment for the mobile view I would like to be able to view the entire ring similar to the desktop view.

On 4/5/2023 at 8:17 AM, tuanphan said:

You can setup password & share url, we can help easier

You can do this, then we can check easier