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

    background-color: #DDDFE6;
   /* background: url('images/bg.png') no-repeat center 15%;*/
    background-image: url('images/bg2.jpg');
    background-image: url('images/bg2.webp');
    background-size: cover;
    background-position: center 15%;
}

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

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

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

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