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

Question

我正在使用 HTML 和 CSS 创建一个网站，但是我的背景图像对像移动设备这样的小型设备没有响应，因为我减小了窗口的大小，所以我的图像的 CSS 代码是这样的：

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

标签： csshtml

Answer 1

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

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