Basic use case
The most common use case, with a single image and a centered content, requires no configuration.
1import NextBgImage from "next-bg-image";
2
3const MyComponent: React.FC = () => (
4 <NextBgImage src={FlowersImage} className="flex flex-col justify-end p-4">
5 <div className="bg-white/80 backdrop-blur p-8 rounded-2xl">
6 <h1 className="text-3xl font-bold mb-2">Lorem ipsum</h1>
7 <p className="text-slate-600">
8 Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
9 cillum sint consectetur cupidatat.
10 </p>
11 </div>
12 </NextBgImage>
13);
14
15export default MyComponent;Lorem ipsum
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
Color overlay
A common pattern is to add a color overlay to the image, to make the text more readable. next-bg-image supports this with the bgColor utility function.
1import NextBgImage, { bgColor } from "next-bg-image";
2
3const MyComponent: React.FC = () => (
4 <NextBgImage
5 src={[bgColor("#0d2eb8ba"), FlowersImage]}
6 className="flex flex-col justify-center items-center px-12"
7 >
8 <h1 className="text-3xl font-bold mb-2 text-white">Lorem ipsum</h1>
9 <p className="text-white/80 text-center">
10 Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
11 cillum sint consectetur cupidatat.
12 </p>
13 </NextBgImage>
14);
15
16export default MyComponent;Lorem ipsum
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
Gradient overlay
Another way to make text or other content more readable is to add a gradient overlay. next-bg-image supports this by accepting an array of images, which are layered on top of each other.
1import NextBgImage from "next-bg-image";
2
3const MyComponent: React.FC = () => (
4 <NextBgImage
5 src={[
6 "radial-gradient(#000000ee 20%, #000000aa 60%, transparent 120%)",
7 FlowersImage,
8 ]}
9 className="flex flex-col justify-center items-center px-12"
10 >
11 <h1 className="text-3xl font-bold mb-2 text-white">Lorem ipsum</h1>
12 <p className="text-white/80 text-center">
13 Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
14 cillum sint consectetur cupidatat.
15 </p>
16 </NextBgImage>
17);
18
19export default MyComponent;Lorem ipsum
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
Custom background size/position
By default, next-bg-image will use cover for the background-size property, and center for the background-position property. You can override these values with the size and position props. These can also be responsive objects, which will be applied at the specified breakpoints.
1import NextBgImage from "next-bg-image";
2
3const MyComponent: React.FC = () => (
4 <NextBgImage
5 src={FlowersImage}
6 position={{
7 base: "-400px 0px",
8 sm: "-300px 0px",
9 md: "-100px 0px",
10 lg: "-330px 120px",
11 xl: "-300px 100px",
12 }}
13 size={{ base: "1100px", lg: "220%", xl: "200%" }}
14 className="flex"
15 >
16 <div className="bg-white/40 backdrop-blur p-8 w-[300px]">
17 <h1 className="text-3xl font-bold mb-2 text-black">Lorem ipsum</h1>
18 <p className="text-slate-500">
19 Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
20 cillum sint consectetur cupidatat.
21 </p>
22 </div>
23 </NextBgImage>
24);
25
26export default MyComponent;Lorem ipsum
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.