Search code examples
next.jsstyled-components

Next.js Image component with linear gradient as background

In the development of my landing page ( with next.js ), i decided to use this line of code as a background of a section.

background-image: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87)), url("/main background img.jpg");

But, since next.js allows you to use Image component for optimization, i tried to put the same img as background this way

<PresentationHero2>
    {/* Background */}
    <Image
     src="/main background img.jpg"
     alt=""
     layout="fill"
     objectFit="cover"
     />
</PresentationHero2>

Styles ( with styled-components )

export const PresentationHero2 = styles.div`

position: relative;

width: 100%;
height: 663px;
 
background: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87));

display: flex; 
align-items: center;
justify-content: center;

overflow: hidden;

`;

And everything works fine, the problem is that i can't see the linear-gradient, so, how can i use Image component but using as well the background color ?, because the only thing i can see, is the image sadly :/

I hope you can help me with this. Thanks for your time !

Solution

  • You can create another div with width and height of 100% and put the background (linear gradient )there, so you will be able to see the linear gradient and the img as well !