.site-background {
    position: fixed;
    top: 90px; /* height of your header */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

    background-color: #DDDFE6;
    background-image: url('images/bg-softball.jpg');
    background-image: url('images/bg-softball.webp');
    background-size: cover;
    background-position: center 6%;
}

@media (max-width: 1024px) {
    .site-background {
        background-image: url('images/bg-softball-mobile.webp');
        background-repeat: no-repeat;
        background-position: center 47%;
        background-size: cover;
        max-height: 900px;
    }
}

@media (max-width: 1024px) and (max-height: 650px){
    .site-background {
        background-image: url('images/bg-softball-mobile.webp');
        background-repeat: no-repeat;
        background-position: center 28%;
        background-size: cover;
        max-height: unset;
    }
}

@media (max-width: 820px) {
    .site-background {
        background-image: url('images/bg-softball-mobile.webp');
        background-repeat: no-repeat;
        background-position: center 40%;
        background-size: cover;
        max-height: 650px;
    }
}

@media (max-width: 550px) {
    .site-background {
        background-image: url('images/bg-softball-mobile.webp');
        background-repeat: no-repeat;
        background-position: center 31%;
        background-size: cover;
        max-height: 300px;
    }
}