- Notifications
You must be signed in to change notification settings - Fork48
Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
License
timhagn/gatsby-background-image
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Speedy, optimizedbackground-images without the work!
gatsby-background-image &gatsby-background-image-es5 are React componentswhich for background-images provide, what Gatsby's owngatsby-image does forthe rest of your images and even more:
Testing explained in its own section.Art-Direction support built in.
It has all the advantages ofgatsby-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 withmultiple stacked background images
plus being able to style withTailwind CSS and suchlike Frameworks
All the glamour (and speed) ofgatsby-image for your Background Images!
Of course styleable withstyled-components and the like!
Sincegatsby-background-image@0.6.0, this is a monorepo managed bylerna, so have a look at the individual READMEs of
gatsby-background-image has an example repository to see its similarities& differences togatsby-image side by side.
It's located at:gbitestTo use it withgatsby-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 ourCONTRIBUTING file and give it a go.Thanks in advance!
For anything you may think necessary tell me by opening an issue or a PR : )!
About
Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.