背景图片显示不正确。当它应该是全尺寸时它很小答案

【问题标题】：background image is not displaying correctly. it is small when it should be full size背景图片显示不正确。当它应该是全尺寸时它很小
【发布时间】：2022-11-24 19:02:36
【问题描述】：

我的背景图片显示不正确。哪些 css 属性可以帮助我实现全尺寸背景图像？我已经设置了 background-size: 100% 100%; 这根本没有帮助。

这是它在我的项目中的外观背景图片：

如您所见，它有点破碎，不太明显。这是它应该看起来的样子：

    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%;
}

【问题讨论】：

您是否尝试过使用 background-size: cover？

标签： css tailwind-css

【解决方案1】：

可能 background-size: contain 会为你工作。另一个选项是cover。你可以在这里查看：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

【讨论】：