React项目本地背景图正常，部署Netlify后重复显示问题求助

问题根源 #

你当前的CSS仅设置了背景图路径与容器宽高，缺少控制背景图显示逻辑的关键属性。本地环境因浏览器默认行为或布局巧合表现正常，部署后环境差异导致适配问题显现。

修复方案 #

给两个页面的CSS类补充以下背景图控制属性：

Crew页面CSS修改 #

.main-content-crew{
    height: 100vh;
    background-image: url('../../../images/crew/background-crew-desktop.jpg');
    width: 100vw;
    /* 新增控制属性 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow-x: hidden;
}

首页CSS修改 #

.main-content-home{
    background: url('../../images/home/background-home-desktop.jpg');
    min-height: 100vh;
    width: 100vw;
    /* 新增控制属性 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow-x: hidden;
}

额外说明 #

• background-size: cover 会让背景图按比例缩放以完全覆盖容器，可能裁剪边缘但无空白；若需完整显示背景图，可替换为 background-size: contain，但容器可能出现空白区域
• 若问题仍存在，检查全局样式（如body默认margin/padding）是否影响容器尺寸，可添加 body { margin: 0; padding: 0; } 重置默认样式

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