background image overflows into other div - css

Question

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 codesandbox
what its doing:
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;
}

Answer 1

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)
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;
}
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 👇
className={`fix-bg-img 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;
Hope this will help.