React中背景图无法占满容器全宽、显示异常问题排查

你的.showcase样式中重复声明了两次background-size属性，后面写的background-size: 100%会覆盖前面的cover配置，这是样式异常的核心原因。
background-size只传入单个值时，该值仅会被识别为背景图宽度，高度默认取auto按图片原始比例计算。如果背景图原始宽高比和高度为100vh的section容器宽高比不匹配，就会出现你描述的问题：

• 配置被覆盖时图片异常放大
• 改为contain后，为了保证图片完整显示不变形，会在容器两侧留空，无法铺满宽度

1. 删除.showcase中多余的background-size: 100%声明，根据实际需求选择正确的属性值：
   • 要背景图填满容器、允许边缘裁切、无变形：保留background-size: cover
   • 要背景图完整显示不裁切、接受容器留空：使用background-size: contain
   • 要强制拉伸图片占满整个容器（会造成图片变形）：使用background-size: 100% 100%，需同时传入宽高两个参数
2. 确认背景图路径配置正确：如果CSS文件和images目录层级不匹配，会出现资源加载失败、样式不符合预期的问题。React项目中src目录下的图片资源也可以像导入arrow图标那样，先import引入再赋值给backgroundImage属性，避免路径解析错误。

/*ShowCase*/
.showcase{
  background-image: url('./images/mobile/image-header.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.showcase .overlay{
  height: 512px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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