How to add overlay to custom mobile image

Site URL: https://www.northwestlifemedicineclinic.com/about

I'm trying to add a custom dark overlay to a custom image used on mobile only. What CSS can I add to do this?

I uploaded a custom image using code, but can't figure out how to add an overlay to that image on mobile only. The website page link is https://www.northwestlifemedicineclinic.com/about

This is the current code for adding the custom background image for mobile only:

[data-section-id="62d6313e77b1292e9ad1548a"]  .section-background img {opacity:0 }
   
[data-section-id="62d6313e77b1292e9ad1548a"]  .section-background {
  
  
  //ADD ABOUT URL BELOW
  background-image: url("https://static1.squarespace.com/static/62bdc7948a5ca05d89960bc0/t/670f06f4f84d305e3a57c076/1729038070153/about-header-mobile.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  
  
}

10 hours ago, HOMENCREATIVE said:

Site URL: https://www.northwestlifemedicineclinic.com/about

I'm trying to add a custom dark overlay to a custom image used on mobile only. What CSS can I add to do this?

I uploaded a custom image using code, but can't figure out how to add an overlay to that image on mobile only. The website page link is https://www.northwestlifemedicineclinic.com/about

This is the current code for adding the custom background image for mobile only:

[data-section-id="62d6313e77b1292e9ad1548a"]  .section-background img {opacity:0 }
   
[data-section-id="62d6313e77b1292e9ad1548a"]  .section-background {
  
  
  //ADD ABOUT URL BELOW
  background-image: url("https://static1.squarespace.com/static/62bdc7948a5ca05d89960bc0/t/670f06f4f84d305e3a57c076/1729038070153/about-header-mobile.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  
  
}

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    [data-section-id="62d6313e77b1292e9ad1548a"] 
    .section-background {
        background-image: url("https://static1.squarespace.com/static/62bdc7948a5ca05d89960bc0/t/670f06f4f84d305e3a57c076/1729038070153/about-header-mobile.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        .section-background-overlay {
            background-color: #000 !important;
        }
        img {
            opacity: 0;
        }
    }
}