React Section with lazy loaded nextjs image as background and tailwind, server component compatible. Img tag can be used as a background, it's usable for SEO, due to lazy loading and use of alt tags (speed and semantics).
If you 👍 or use this project, consider giving it a ★, thanks! 🙌
Package uses Nextjs Image component, so having next.js installed is required. Don't forget to add allowed domains in next.config.js.
Component is compatible with server only components.
npm i --save @eisberg-labs/next-image-section
Import style.css in your global css file or directly in the component:
import ImageSection from '@eisberg-labs/next-image-section';
import '@eisberg-labs/next-image-section/style.css';
<ImageSection
src={"https://pixabay.com/images/id-2748776"}
alt={"Pixabay Milna Croatia photo and picture by k9arteu"}
childClassName={"container bg-white"}
>
<p className={"text-xl"}>You can see in this example that img tag can work as a background.</p>
</ImageSection>
MIT © Eisberg Labs
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.