我明白你要的效果：桌面端背景图全屏展示，屏幕变窄时只裁掉右侧区域，左侧内容和边缘始终保持可见。之前调background-size和background-position没搞定？大概率是参数组合不对，我给你一套精准的方案：

核心CSS代码实现 #

/* 假设你的首页背景容器类名为home-hero */
.home-hero {
  /* 容器宽度占满屏幕 */
  width: 100%;
  /* 设置你需要的背景高度，比如视窗高度或固定值 */
  min-height: 100vh;
  /* 关键：隐藏容器外的内容，确保右侧超出部分被裁掉 */
  overflow: hidden;
  /* 引入你的背景图 */
  background-image: url('你的图片路径');
  /* 核心：固定背景图左对齐，垂直方向可根据需求选center/top/bottom */
  background-position: left center;
  /* 禁止背景图重复 */
  background-repeat: no-repeat;
  /* 让背景图高度铺满容器，宽度按比例自适应，避免图片变形 */
  background-size: auto 100%;
}

如果你的背景图本身宽度足够大（比如1920px以上），想要桌面端时宽度刚好铺满屏幕，屏幕缩小时直接裁右侧，也可以把background-size换成cover，同时保留background-position: left center：

background-size: cover;

为什么之前的参数没生效？ #

• 如果你之前用了background-position: center：屏幕缩小时会同时裁剪左右两侧，不符合你要的左侧固定需求；
• 如果用了background-size: contain：图片会自动缩放以完整显示在容器内，不会出现裁剪效果；
• 忘记设置overflow: hidden：容器外的背景图部分会露出来，达不到右侧隐藏的目的。

额外调试建议 #

1. 检查你的背景图尺寸：确保图片宽度大于常见桌面屏幕宽度（比如1920px），这样桌面端才能铺满；
2. 确认容器没有额外的padding或margin：否则会导致容器宽度不足，背景图显示不全；
3. 可以给容器加个临时边框（border: 1px solid red），直观查看容器范围，排查是否是容器尺寸问题。

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