Css 如何使背景图像响应移动设备

我正在使用HTML和CSS制作一个网站，但是我的背景图片没有响应 对于像移动设备这样的小型设备，它不会随着我减小窗口的大小而调整大小 我的图像CSS代码如下所示：

body{
    background-image: url(image.jpg);
    background-size: cover;
    border-image-repeat: no-repeat;
}

---

您需要了解如何使用

媒体查询

，它们在css中用于定义特定的屏幕大小。 我建议您看看这里：

我还建议图像有多种尺寸，如果你不想将大图像挤压到移动大小的画布上，你应该将它们分为移动/平板/桌面

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    body {
        background-image: url(mobile_image.jpg);
        background-size: cover;
        border-image-repeat: no-repeat;
    }
}

---

可以使用相同的图像根据浏览器窗口的大小进行缩放：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

---

/*当浏览器或屏幕尺寸低于767px时使用*/

@media only screen and (max-width: 767px) {
        body{
            background: url(image.jpg)no-repeat;
            background-size: cover;
            background-position: center; 
        }
    }

---

使用

背景大小：包含不工作，兄弟只是使网站非常小，即使在大屏幕上