CSS两个背景图像不'；不适合移动设备

我想把两个像素完美的图像背景放在一起。这在台式机上很有效，但在移动设备上不起作用

例如：

.header{
背景：url(https://stammalanen.de/wp-content/themes/alanen/images/mapHeaderBg.jpg);
背景重复：无重复；
高度：216px；
}
梅因先生{
背景：url(https://stammalanen.de/wp-content/themes/alanen/images/mapContentBg.jpg);
背景重复：重复-y；
高度：257px；
}

---

您可以将包装类设置为黑色背景，这样图像就可以融入其中

试试这个

    .header{      
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapHeaderBg.jpg);
        background-repeat: no-repeat;
        height: 216px;
        background-position: center bottom;
        background-size: contain;
    }

    .main{
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapContentBg.jpg);
        background-repeat: repeat-y;
        height: 257px;
        background-position: center;
        background-size: contain;
    }

    .wrapper{
        background-color: #000;
    }

    @media(max-width: 767px){
        .wrapper{
            margin-top: -100px;
        }
    }

---

使用

背景尺寸：封面