{"id":23085106,"url":"https://github.com/quantity-digital/vue-bg-src","last_synced_at":"2025-04-03T15:24:06.213Z","repository":{"id":57394662,"uuid":"111377580","full_name":"quantity-digital/vue-bg-src","owner":"quantity-digital","description":"Vue directive to make responsive image backgrounds similar to using srcset on image tags. ","archived":false,"fork":false,"pushed_at":"2017-11-29T09:56:59.000Z","size":135,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T04:15:25.820Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quantity-digital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-20T07:41:29.000Z","updated_at":"2018-03-19T11:45:32.000Z","dependencies_parsed_at":"2022-09-19T17:20:35.491Z","dependency_job_id":null,"html_url":"https://github.com/quantity-digital/vue-bg-src","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantity-digital%2Fvue-bg-src","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantity-digital%2Fvue-bg-src/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantity-digital%2Fvue-bg-src/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantity-digital%2Fvue-bg-src/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quantity-digital","download_url":"https://codeload.github.com/quantity-digital/vue-bg-src/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247025309,"owners_count":20871162,"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":[],"created_at":"2024-12-16T17:49:18.252Z","updated_at":"2025-04-03T15:24:06.194Z","avatar_url":"https://github.com/quantity-digital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-bg-src\nSimple Vue.js directive for defining responsive image backgrounds on an element similar to using srcset on an img tag. The background image is replaced based on a predefined set of media queries. \n\n## Features\n\n- Very simple setup.\n- No dependendcies.\n- Fallback to low resolution image. \n- Works with IE 10+. \n\n## Installing\n\n### With a module bundler (webpack, rollup, etc.)\n\n```javascript\nnpm install vue-bg-src\n```\n\nThen initialize the plugin with your media queries\n\n```javascript\n// main.js\nimport VueBgSrc from 'vue-bg-src';\n\nconst mediaQueries = {\n\tmd: '(min-width: 500px)',\n\tlg: '(min-width: 1000px)'\n};\n\nVue.use( VueBgSrc, { mediaQueries: mediaQueries } );\n```\n\n### CDN\n\nInclude the vue-bg-src script. \n\n```html\n\u003cscript src=\"https://unpkg.com/vue-bg-src@1.0.0\"\u003e\u003c/script\u003e\n```\n\nThen initialize the plugin.\n\n```javascript\n// main.js\n\nconst mediaQueries = {\n\tmd: '(min-width: 500px)',\n\tlg: '(min-width: 1000px)'\n};\n\nVue.use( VueBgSrc, { mediaQueries: mediaQueries } );\n```\n\n### Examples\n\nSimply add `v-bg-set` on the element. Use the inline background for your low resolution fallback. \n\n```html\n\u003cdiv v-bg-set style=\"background-image('/my/image.png')\"\u003e\u003c/div\u003e\n```\n\nThen add the upscaled version of the image at your breakpoints like this: \n\n```html\n\u003cdiv v-bg-set style=\"background-image('/my/image.png')\" data-bg-src-md=\"/my/medium-image.png\" data-bg-src-lg=\"/my/large-image.png\"\u003e\u003c/div\u003e\n```\n\n**Have fun!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantity-digital%2Fvue-bg-src","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquantity-digital%2Fvue-bg-src","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantity-digital%2Fvue-bg-src/lists"}