npm i gatsby-background-image


Lazy-loading React (multi)background-image component with optional support for the blur-up effect.

by Tim Hagn

1.6.0 (see all)License:MITTypeScript:Not FoundCategories:React Blur Effect, React Lazy Load
npm i gatsby-background-image


Speedy, optimized background-images without the work!

gatsby-background-image is released under the MIT license. Current CircleCI build status of gatsby-background-image. Current npm package version. Downloads per week on npm. PRs welcome! Lerna badge.

gatsby-background-image & gatsby-background-image-es5 are React components which for background-images provide, what Gatsby's own gatsby-image does for the rest of your images and even more:
Testing explained in its own section. Art-Direction support built in.

It has all the advantages of gatsby-image, including the "blur-up" technique or a "traced placeholder" SVG to show a preview of the image while it loads,
plus being usable as a container (no more hacks with extra wrappers)
plus being able to work with multiple stacked background images
plus being able to style with Tailwind CSS and suchlike Frameworks

All the glamour (and speed) of gatsby-image for your Background Images!

Of course styleable with styled-components and the like!


Since gatsby-background-image@0.6.0, this is a monorepo managed by lerna, so have a look at the individual READMEs of

Example Repo

gatsby-background-image has an example repository to see its similarities & differences to gatsby-image side by side.
It's located at: gbitest To use it with gatsby-background-image-es5 change the dependency there.


Everyone is more than welcome to contribute to this little package!
Docs, Reviews, Testing, Code - whatever you want to add, just go for it : ). So have a look at our CONTRIBUTING file and give it a go. Thanks in advance!


For anything you may think necessary tell me by opening an issue or a PR : )!