1

I've been trying to get an image to overlay over a background image with a clip path. Using a z-index doesn't work and I've also tried using relative for the background and absolute for the image. I've been reading through dozens of solutions and cannot find one that works yet. Is there something obvious I'm missing? Any suggestions welcome. I'm using Tailwind css in a Next JS app.

.herotest {
  background: white;
  background-image: url("../public/assets/background.png"), linear-gradient(90deg, rgba(78,84,200,1) 50%, rgba(143,148,251,1) 100%);
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 35%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 35%, 0% 100%);
  position: relative;
}


function Hero() {
    return (
        <>
            <div className="herotest h-full">
                <div className="max-w-6xl m-auto block md:pt-10">
                    <Nav />
                    <div>
                        <div className="text-center lg:text-left px-5 md:pl-10 pt-10 md:pt-24">
                            <h1>Make smarter decisions</h1>
                            <h2>Ravelin provides technology and support to help you prevent <br></br> evolving fraud threats and accept payments with confidence.</h2>
                            <div className="overflow-visible relative flex justify-center lg:justify-start mt-5 pb-48">
                                <a
                                    href="#"
                                    rel="noopener"
                                    className="inline-block py-2 px-4 rounded-md bg-blue-light text-white cursor-pointer"
                                >
                                    <span>View solutions</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <div>
                    <img
                        className="z-10 relative ml-auto lg:-mt-96 pointer-events-none"
                        width={'514px'}
                        height={'620px'}
                        style={{ maxHeight: 620 }}
                        src="/assets/product.png"
                        alt="dashboard"
                    />
                </div>
        </>
    );
}

export default Hero;

```
Elektra Murphy
  • 59
  • 7
  • is this helpful for you? https://stackoverflow.com/questions/68872526/im-unable-to-create-this-design-using-css –  Aug 26 '21 at 14:55
  • @Nishant Unfortunately no! I need to have an element on top of the clip path – Elektra Murphy Aug 26 '21 at 14:58
  • I'm not sure I fully understand - the img seems to have a relative rather than an absolute positioning - where is it being displayed? I can't see that having a clip path on another element should make any difference. Have you tried making one absolute and positioned ? – A Haworth Aug 26 '21 at 15:19

0 Answers0