/gatsby-background-image

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

Primary LanguageJavaScriptMIT LicenseMIT

gatsby-background-image(-es5)

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.
It started by pilfering their excellent work and adapting it - but slowly it's outgrowing those wee beginnings.

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

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

And it's even styleable with styled-components and the like!

Preamble

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

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

  • For the moment Internet Explorer 11 seems to have problems with _tracedSVG and parsing the background-* CSS props, gotta investigate further...

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