Shift the position of background image only on mobile

Site URL: https://www.campuspa.com/

I'm using a few images at the top of pages as a backgrounds. The positioning of the image is awkward on mobile, so I want to shift the position of the background image.

Here's the code I have right now:

@media screen and (max-width: 640px) {
  #sections :nth-of-type(1)  {
    background: red;
  }
}

So far as I understand, this is supposed to select just the section of the page at the top with the image and turn the background red (just for show, to see if it works). However, this changes the background of the entire homepage red instead of just that slide.

I've messed around a bunch with different nth-of-type selection cascades with no luck so far. Any tips are greatly appreciated.

Thanks in advance!

Daniel

Add to Home > Design > Custom CSS

/* Resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset !important;
    height: 40vh;
}
/* h1 size */
.homepage #page section:first-child h1 {
    font-size: 30px;
}
/* h3 size */
.homepage #page section:first-child h3 {
    font-size: 14px;
    margin-top: 0 !important;
}
}

Thank you tuanphan - got this to work building from your code! In case anyone else ever finds this, here's what I ended up with:

@media screen and (max-width:767px) {
.homepage #page section:first-child > div.section-background > img {
      object-position: -680px -200px !important;
      height: 56em !important;
  }
}

Difference in the selector was I had to add "> div.section-background > img" to select the background image in particular. This was necessary to apply the object-position adjustments to move the positioning of background. 

Note that the !important tag is necessary for this to work, otherwise Squarespace will override the position value. 

hey guys, @tuanphan and @fleet

I need some help here please. I have the same issue.

I need to just move the position of my background image for Tablet Landscape.

This is what I've tried, but nothing is happening. I just want to move the image to the right a bit so the guy isnt cut off.

Here's the url for you to look at https://www.constructionconsultingacademy.com/

@media only screen and (max-device-width : 1024px)
and (min-device-width : 768px) {
.Index-page .Index-page--has-image #welcome section:first-child > div.section-background > img {
      object-position: -680px -200px !important;
      height: 56em !important;
  }
} 

and (orientation: landscape)