gatsby-background-image(-es5)

Speedy, optimized background-images without the work!

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:
Now it's possible to use multiple stacked Background Images!

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.

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

Of course styleable with styled-components and the like!

Now it's possible to style BackgroundImage with Tailwind CSS and suchlike Frameworks!

Preamble

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

• gatsby-background-image
• gatsby-background-image-es5

Contributing

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!

TODO

• Internet Explorer 11 seems to have problems with _tracedSVG...
• noscript WebP support...

For anything else tell me by opening an issue or a PR : )!