I have a background image that is not staying within its div and will overflow into other contents. The background image div is on the same z-index and is nested within the background gradient div which contains the navbar and CTA section. I have tried just adding the background image to the same css class as the background gradient, but that has caused other issues to arise since I cannot resize it to how large it is supposed to be so I am just using the method I stated above. Can someone please help me with this? link to code sandbox is here

what it needs to look like:

code below:

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;

code for 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;
  }

CodePudding user response：

It seems that the container of this section is not having a border radius matching the shape of the left bottom corner.

That mismatched corner is causing the background image to overflow when on a smaller screen width.

Here is a quick fix that could be tried for this issue: (live demo: codesandbox)

1. Add a fix class to the CSS in index.css:

/* if it works, change the class name to a proper one later */

.fix-bg-img {
  border-radius: 0px 0px 0px 70px;
}

2. Add the fix class to the said container in App.jsx:

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
        // Add the fix here