仅能修改body/html CSS时，如何让5000px背景图适配页面宽度？

首先纠正你之前外部CSS无效的核心问题：CSS属性赋值必须用冒号:，而不是等号=，你之前的代码语法错误，所以完全不生效。正确的基础写法应该是：

body {
  background-image: url("myimage.jpg");
  background-size: cover;
}

但cover会强制拉伸图片覆盖整个容器，会裁剪你的头部艺术作品，不符合需求。针对你的场景——要完整显示头部图案、保留图片下方空白，同时在高低分辨率屏幕都适配，且只能修改body/html的CSS，给你以下可行方案：

html, body {
  min-height: 100vh;
  margin: 0;
}

body {
  background-image: url("myimage.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #ffffff; /* 替换成你图片下方空白的实际颜色 */
}

各属性作用说明：

• min-height: 100vh：让html和body至少占满整个视口高度，避免页面内容过少时背景图被截断。
• background-size: contain：自动按图片原比例缩放，确保图片完整显示在body范围内——1080P屏幕下会缩小到能完整展示头部和下方空白的尺寸；2K/4K屏幕下会按比例放大，保持图片清晰不模糊。
• background-position: top center：固定头部图案在屏幕顶部居中，符合你的展示需求。
• background-repeat: no-repeat：禁止图片重复平铺。
• background-color：设置和图片下方空白一致的颜色，防止图片缩小时，body背景和图片空白区域出现色差。

如果需要背景图始终对齐顶部，且当页面内容超过视口高度时，背景图固定不滚动，可以额外添加background-attachment: fixed，但注意该属性在移动端可能有性能问题，按需使用。

内容的提问来源于stack exchange，提问作者rawraj