如何为HTML背景选择正确的图像大小？

我计划使用图像作为我的网页背景：

html {
    background:#505D6E url(/img/body7.jpg) no-repeat center center fixed;
    min-height:100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

---

图像大小应该是多少？1920×1280px够了吗？或者，我应该用其他尺寸的吗？或者，我可能应该根据用户的设备定义不同的图像大小？如果是，我怎么做

您应该使用媒体查询为不同的设备加载不同大小的图像。e、 例如，不需要在手机上加载1080p图像。下面是一个简单的实现：

body{
    background-color:#505D6E;
    background-repeat: no-repeat;
    background-position: center center
    background-attachment: fixed;
    background-image: url(/img/body7-maxres.jpg);
    min-height:100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
@media (max-width: 1920px){
    body{ background-image: url(/img/body7-1080p.jpg); }
}
@media (max-width: 500px){
    body{ background-image: url(/img/body7-sm.jpg); }
}

---

媒体查询文档：

图像越大，加载页面所需的时间越长

您确实可以使用CSS媒体查询，以便用户只加载适合其视口大小的图像

进一步解释：

媒体查询使我们能够创造一种响应性体验，将特定的风格应用于小屏幕、大屏幕以及两者之间的任何地方。媒体查询语法允许创建可根据设备特征应用的规则

---

这就足够了，因为图像的大小很大，而背景大小是覆盖的。最小的图像应该在媒体查询之外定义，以确保不兼容的浏览器不会加载超过需要的数据。