css - 响应式图像背景尺寸封面

Question

我正在尝试使用图像作为背景作为封面。但是图像在不同的窗口大小下显示不同。我试图在 chrome 的开发者工具上查看。在我的图像上有曲线形状，对于大屏幕和移动设备，它看起来完全不同。

我想以相同的外观显示所有窗口大小的图像。这是我的 CSS 代码。

background-image:url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-repeat: no-repeat;
background-size: cover ;
height:auto;

请告诉我我必须做什么。

Answer 1

对于我建立的几个网站，这一直是我用来制作响应式大型background-image

    img   {   
        height: auto; 
        width: 100%;
        background-image: url(../wp-content/uploads/2018/06/footer-wave-img.png);
        background-position: 0%, 0%, 50%, 50%;
        background-size: auto, cover;
     }