Mobile Background Size

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

Hello, 

I am trying to figure out how to resize solely the background image of my mobile website, it keeps getting cutting off (as shown below).  Would I be able to edit this in CSS?  I've been trying to find some code on these forums but nothing has worked yet.  

Thank you! 

<style>
@media only screen and (max-width: 600px) {
  .section-background {
    background-color: black !important;
  }

  .section-background img {
    height: 50vh !important;
    margin-top: 25vh;
  }
}
</style>

Put this in the code injection for the page you want it to work on.

Thank you so much!  It worked!  

@rwp So it worked great for the home page, however it changed my "Contact Us" page to being all black instead of the contrasting white page that it was.  Is there anyway around that obstacle now? 

Make sure you put the code in the code injection section of the home page. Not in the site wide code injection area.

@rwp Awesome!  Thank you so much for your assistance!