我有一个背景图像，它没有停留在它的div中，并且会溢出到其他内容中。背景图像div在相同的z索引上，并且嵌套在包含导航栏和CTA部分的背景渐变div中。我试着将背景图像添加到与背景渐变相同的css类中，但这已经导致了其他问题的出现，因为我不能调整它的大小，它应该是，所以我只是使用我上面所说的方法。有人能请帮助我吗？链接到代码沙箱是在这里codesandbox
它的作用：

它需要看起来像什么：

代码如下：

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 z-[0] h-[450px]'>
      <div className={`flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}>
        <div className="background-img z-[-0] absolute overflow-hidden "></div>
        <div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
          <Navbar />
        </div>
        <div className={`z-[0] ${styles.boxWidth}`}> 
          <CTA />
        </div>
      </div>
    </div>

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

export default App;

css代码：

@media screen and (max-width: 760px) {
  .bg-cta-gradient {
    background: linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
    border-radius: 0px 0px 0px 70px;
  }

  .background-img {
    background-image: url('./assets/bg-pattern-intro-mobile.svg') !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1300px;
    height: 1300px;
    overflow: hidden;
    margin-left: 200px;
    margin-top: 250px;
  }