How to make image cover responsive in mobile device by css code

We have a problem with the website preview on mobile/tablet. Regarding the Mobile version, home page of the website isn’t responsive completely and the main cover (https://mineteams.com) doesn’t show all the pictures on it while in the demo version of it this problem doesn’t exist.

Now you are requested to help us solve this problem.

PHP Code:

<div class="pth-hero__scene pth-parallax" style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none;">

CSS Code :

      div.pth-hero__scene.pth-parallax {
        background:  no-repeat fixed center center / cover rgba(0, 0, 0, 0);
        height: 40%;
        left: 0;
        position: cover;
        top: 10%;
        width: 100%;
      }
    }

Solution

If you want to make sure that all pictures of your background image are shown on smaller screens as well, you need to set your background-size to:

.pth-hero__background-inner {
 background-size: contain !important;
}

In regards to your homepage not being completely responsive: please be more specific.