{"id":13725649,"url":"https://github.com/timhagn/gatsby-background-image","last_synced_at":"2025-04-12T19:49:21.249Z","repository":{"id":39578954,"uuid":"161534793","full_name":"timhagn/gatsby-background-image","owner":"timhagn","description":"Lazy-loading React (multi)background-image component with optional support for the blur-up effect.","archived":false,"fork":false,"pushed_at":"2022-07-21T19:42:36.000Z","size":2693,"stargazers_count":252,"open_issues_count":13,"forks_count":49,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T22:11:14.322Z","etag":null,"topics":["background-image","gatsby","gatsby-background-image","gatsby-image","hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timhagn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-12T19:25:21.000Z","updated_at":"2025-03-30T00:45:15.000Z","dependencies_parsed_at":"2022-08-09T15:02:59.240Z","dependency_job_id":null,"html_url":"https://github.com/timhagn/gatsby-background-image","commit_stats":null,"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timhagn%2Fgatsby-background-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timhagn%2Fgatsby-background-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timhagn%2Fgatsby-background-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timhagn%2Fgatsby-background-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timhagn","download_url":"https://codeload.github.com/timhagn/gatsby-background-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393341,"owners_count":20931806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background-image","gatsby","gatsby-background-image","gatsby-image","hacktoberfest"],"created_at":"2024-08-03T01:02:30.202Z","updated_at":"2025-04-12T19:49:21.220Z","avatar_url":"https://github.com/timhagn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  gatsby-background-image(-es5)\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ci\u003eSpeedy, optimized \u003cstrong\u003ebackground\u003c/strong\u003e-images without the work!\u003c/i\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/timhagn/gatsby-background-image/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"gatsby-background-image is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/timhagn/gatsby-background-image\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/timhagn/gatsby-background-image.svg?style=shield\" alt=\"Current CircleCI build status of gatsby-background-image.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/timhagn/gatsby-background-image\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/timhagn/gatsby-background-image/branch/main/graph/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/gatsby-background-image\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/gatsby-background-image.svg\" alt=\"Current npm package version.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-background-image?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/gatsby-background-image.svg\" alt=\"Downloads per week on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/timhagn/gatsby-background-image/blob/main/CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://lerna.js.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/maintained%20with-lerna-0a7bbb.svg\" alt=\"Lerna badge.\" /\u003e\n  \u003c/a\u003e  \n\u003c/p\u003e\n\n`gatsby-background-image` \u0026 `gatsby-background-image-es5` are React components\nwhich for background-images provide, what Gatsby's own `gatsby-image` does for\nthe rest of your images and even more:  \n**[Testing explained](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#testing-gatsby-background-image) in its own section.**\n**[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.**\n\nIt has all the advantages of [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image),\nincluding the \"blur-up\" technique or a \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\"\nSVG to show a preview of the image while it loads,  \n**plus** being usable as a container (no more hacks with extra wrappers)  \n**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)  \n**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)\n\nAll the glamour (and speed) of `gatsby-image` for your Background Images!\n\n_*Of course styleable with `styled-components` and the like!*_\n\n## Preamble\n\nSince `gatsby-background-image@0.6.0`, this is a monorepo managed by\n[`lerna`](https://lerna.js.org/), so have a look at the individual READMEs of\n\n- [`gatsby-background-image`](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image#readme)\n- [`gatsby-background-image-es5`](https://github.com/timhagn/gatsby-background-image/tree/main/packages/gatsby-background-image-es5#readme)\n\n## Example Repo\n\n`gatsby-background-image` has an example repository to see its similarities\n\u0026 differences to `gatsby-image` side by side.  \nIt's located at: [gbitest](https://github.com/timhagn/gbitest)\nTo use it with `gatsby-background-image-es5` change the dependency there.\n\n## Contributing\n\nEveryone is more than welcome to contribute to this little package!  \nDocs, Reviews, Testing, Code - whatever you want to add, just go for it : ).\nSo have a look at our [CONTRIBUTING](CONTRIBUTING.md) file and give it a go.\nThanks in advance!\n\n## TODO\n\n_For anything you may think necessary tell me by opening an issue or a PR : )!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimhagn%2Fgatsby-background-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimhagn%2Fgatsby-background-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimhagn%2Fgatsby-background-image/lists"}