svg patternsvg fullpng fullcss gradientsvg blobsvg blend
background

blend svg as background

Flicker issue may be seen

  1. top svg pattern should be used like SVG PATTERN method
  2. Add svg in nextjs image component.
  3. In image component add negative z index to make it background
  4. In image component use object-cover, object-contain etc object property.
  5. Give image component widht and height to use object-cover
<Image
        alt='background'
        src={bg2}
        className='absolute top-0 -z-10 h-full w-full object-cover'
      />