Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timhagn/gatsby-background-image
Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
https://github.com/timhagn/gatsby-background-image
background-image gatsby gatsby-background-image gatsby-image hacktoberfest
Last synced: about 3 hours ago
JSON representation
Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
- Host: GitHub
- URL: https://github.com/timhagn/gatsby-background-image
- Owner: timhagn
- License: mit
- Created: 2018-12-12T19:25:21.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2022-07-21T19:42:36.000Z (over 2 years ago)
- Last Synced: 2025-01-15T00:17:40.741Z (7 days ago)
- Topics: background-image, gatsby, gatsby-background-image, gatsby-image, hacktoberfest
- Language: JavaScript
- Homepage:
- Size: 2.57 MB
- Stars: 253
- Watchers: 6
- Forks: 49
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-list - gatsby-background-image - loading React (multi)background-image component with optional support for the blur-up effect. | timhagn | 252 | (JavaScript)
README
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:
**[Testing explained](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#testing-gatsby-background-image) in its own section.**
**[Art-Direction support](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#how-to-use-with-art-direction-support) built in.**
It has all the advantages of [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image),
including the "blur-up" technique or a "[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)"
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](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#how-to-use-with-multiple-images)
**plus** being able to style with [Tailwind CSS and suchlike Frameworks](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#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`](https://lerna.js.org/), so have a look at the individual READMEs of
- [`gatsby-background-image`](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#readme)
- [`gatsby-background-image-es5`](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image-es5#readme)
## 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](https://github.com/timhagn/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](CONTRIBUTING.md) 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 : )!_