How do I make background image fit when in mobile view?

Site URL: https://www.staceytan.com/cultureally

Hi there! I have a section with a background image, on desktop it looks fine but on mobile it crops out most of the image! Is there any way to fit the desktop image to mobile view? I have tried most of the code available here and am having trouble still. There was a code that worked well but I don't know how to apply it to a specific page, and I have several pages I want to do this for. Below is the code that worked but I don't know how to target specific pages:

@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(your-image-url-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

On 4/13/2022 at 10:15 PM, whatstaceface said:

Site URL: https://www.staceytan.com/cultureally

Hi there! I have a section with a background image, on desktop it looks fine but on mobile it crops out most of the image! Is there any way to fit the desktop image to mobile view? I have tried most of the code available here and am having trouble still. There was a code that worked well but I don't know how to apply it to a specific page, and I have several pages I want to do this for. Below is the code that worked but I don't know how to target specific pages:

@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(your-image-url-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

It looks you have figured it out. Do you still need help?

its already works.