eisberg labs logo
Eisberg Labs React Components
About UsBlog

Downloads

Next Image as Background Section

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).

Example

If you 👍 or use this project, consider giving it a ★, thanks! 🙌

Installation

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

Usage

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>

Api

License

MIT © Eisberg Labs

Examples

basic-example.tsx

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

4.0.2 (2023-01-25)

Bug Fixes

4.0.0 (2023-01-25)

Features