All Projects → timhagn → Gatsby Background Image

timhagn / Gatsby Background Image

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Gatsby Background Image

Post Scheduler
Schedule posts & content updates for static websites (Jekyll, Hugo, Gatsby, Phenomic etc)
Stars: ✭ 184 (-20.35%)
Mutual labels:  gatsby
Remark Codesandbox
🎩 Create CodeSandbox directly from code blocks
Stars: ✭ 204 (-11.69%)
Mutual labels:  gatsby
Desktop
Stars: ✭ 225 (-2.6%)
Mutual labels:  gatsby
Gatsby Plugin S3
Deploy your gatsby site to a S3 bucket.
Stars: ✭ 186 (-19.48%)
Mutual labels:  gatsby
Midway
Headless Starter with Sanity + Gatsby + Shopify Repo
Stars: ✭ 195 (-15.58%)
Mutual labels:  gatsby
Useauth
The simplest way to add authentication to your React app. Supports various providers.
Stars: ✭ 2,532 (+996.1%)
Mutual labels:  gatsby
Gatsby Starter Rocket Docs
The documentation starter you were looking for (ready for Gatsby v3) ⚡️
Stars: ✭ 182 (-21.21%)
Mutual labels:  gatsby
Reactive Resume
A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
Stars: ✭ 3,280 (+1319.91%)
Mutual labels:  gatsby
Here Covid 19 Tracker
Using HERE Technologies APIs, fork and build your own COVID-19 Tracker. For a live version, see the website.
Stars: ✭ 200 (-13.42%)
Mutual labels:  gatsby
Docs
Repository of Twilio SendGrid's product documentation.
Stars: ✭ 221 (-4.33%)
Mutual labels:  gatsby
Gatsby Starter Morning Dew
🚀 A Gatsby theme/starter to build lightning-fast blog/websites
Stars: ✭ 186 (-19.48%)
Mutual labels:  gatsby
React Portfolio Template
Modern React Portfolio Template (FREE)
Stars: ✭ 188 (-18.61%)
Mutual labels:  gatsby
Website
Website of [email protected], Powered by JAMStack
Stars: ✭ 218 (-5.63%)
Mutual labels:  gatsby
Smakosh.com
My personal website
Stars: ✭ 185 (-19.91%)
Mutual labels:  gatsby
Github Profilinator
🚀 This tool contains mini GUI components that you can hook together to automatically generate markdown code for a perfect readme.
Stars: ✭ 225 (-2.6%)
Mutual labels:  gatsby
Gatsby Docker
Develop & Build GatsbyJS static sites within Docker.
Stars: ✭ 184 (-20.35%)
Mutual labels:  gatsby
Gatsby Gh Pages Action
GitHub Action to build and deploy your Gatsby site to GitHub Pages ❤️🎩
Stars: ✭ 208 (-9.96%)
Mutual labels:  gatsby
Cloudflare Docs
Cloudflare’s developer docs.
Stars: ✭ 219 (-5.19%)
Mutual labels:  gatsby
Narative.co
Narative builds brands, websites and products for growth-minded companies.
Stars: ✭ 226 (-2.16%)
Mutual labels:  gatsby
Amdec Website
Stars: ✭ 219 (-5.19%)
Mutual labels:  gatsby

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 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!

Preamble

Since [email protected], 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.

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 anything you may think necessary tell me by opening an issue or a PR : )!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].