SVG as Background Image Overlay - Next.js - CSS - Bootstrap

See how to use multiple SVG images as a background overlay in your next.js site. This can be used to add different SVG icons or images on top of your main background.
This video is part of a larger landing page series that will show you how I build the roadsaudio.com landing page. Subscribe to be notified when new episodes are available
👉 Follow the playlist: • Mobile App Landing Pag...
🚗 Roads landing page: roadsaudio.com/
✅ Complete Code: github.com/dav...
🤑 GET 10% OFF iubenda Privacy Policy: iubenda.refr.cc...
💸 Save On Your Custom Domain From NameCheap: namecheap.pxf....

[@viniciusup]

You could also use some absolute containers adding the background-image prop to it. In that case, for svg's, you'd need to import your svg, and then set the prop value as 'yourSvgName.src'. Something like this:
import bg from '../../assets/images/image.jpg'
Then in the element:
style={{
backgroundImage: `url(${bg.src})`,
}}

[@1ManStartup]

Thanks for sharing! Another comment said it can be done in pure css, which if I were to refactor it I'd likely go that route.

[@NeilMyatt]

could have done this with pure CSS using border radius, which has the two benefits of fewer http requests, easier maintenance and more flexibility for colour/responsiveness if the design changes. I'd only use SVG if the shape was too complex for CSS. just my 2c

[@1ManStartup]

Thanks for sharing, yes that sounds like it'd be much more flexible