背景图片无法全屏显示，设置background-size:100% 100%仍无效，求CSS解决办法

我的背景图片无法正常显示，本应全屏却尺寸偏小且被压缩，几乎看不清。我已经设置了background-size:100% 100%，但完全没有效果。请问哪些CSS属性可以帮助我实现全屏背景图片？

实际显示效果 #

预期显示效果 #

当前React代码 #

import styles from './style';
import { Navbar, CTA, BodyTop, BodyBottom, BodyMiddle, Footer } from './components';

const App = () => (
  <div className='w-full overflow-hidden'>
    <div className='bg-cta-gradient h-[400px]'>
      <div className={`flex-col background-img ${styles.paddingX} ${styles.flexCenter}`}>
        <div className={`mt-5 ${styles.boxWidth}`}>
          <Navbar />
        </div>
        <div className={`${styles.boxWidth}`}> 
          <CTA />
        </div>
      </div>
    </div>

    <div className={`bg-bodyColor ${styles.flexStart}`}>
      <div className={`${styles.boxWidth}`}> 
          <BodyTop />
          <BodyMiddle />
          <BodyBottom />
          <Footer />
        </div>
    </div>
    
  </div>
);

export default App;

当前CSS代码 #

.background-img {
  background-image: url('./assets/bg-pattern-intro-desktop.svg') !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

问题核心在于你把背景图应用在了内部带padding的子容器上，这个容器的高度由内容撑开，并非外层的400px高度容器，导致背景图只能在小范围内显示，出现压缩偏小的情况。以下是修复方案：

1. 调整背景图的应用容器 #

将background-img类移到外层的高400px容器上，让背景图充满整个目标区域：

<div className='bg-cta-gradient h-[400px] background-img'>
  <div className={`flex-col ${styles.paddingX} ${styles.flexCenter}`}>
    {/* 内部内容保持不变 */}
  </div>
</div>

2. 优化背景图CSS属性 #

根据预期效果，调整以下CSS属性来实现充满容器的背景：

.background-img {
  background-image: url('./assets/bg-pattern-intro-desktop.svg');
  background-repeat: no-repeat;
  /* 按比例缩放背景图，完全覆盖容器，无空白 */
  background-size: cover;
  /* 居中对齐背景图，避免边缘过度裁剪 */
  background-position: center center;
}

可选属性说明 #

• background-size: cover：背景图按比例缩放，完全覆盖容器，可能裁剪部分边缘，但保证无空白区域。
• background-size: contain：背景图完整显示，保持比例，容器可能出现空白区域。
• background-size: 100% auto：宽度充满容器，高度按比例自适应，适合宽屏背景图。
• background-position：控制背景图在容器内的位置，center center是最常用的居中对齐方式。

完成以上修改后，背景图就能充满整个400px高度的容器，达到你预期的显示效果。

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