{"id":19728582,"url":"https://github.com/zeshanshani/jquery-convert-to-background","last_synced_at":"2025-04-30T01:30:53.004Z","repository":{"id":57282038,"uuid":"174811216","full_name":"zeshanshani/jquery-convert-to-background","owner":"zeshanshani","description":"Convert an image into the background image while keeping the normal image tag in place for SEO purpose.","archived":false,"fork":false,"pushed_at":"2019-03-10T12:35:31.000Z","size":12,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-22T08:17:06.450Z","etag":null,"topics":["backgroundimage","images","imagetobackground","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/zeshanshani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-10T10:58:52.000Z","updated_at":"2019-03-12T11:04:44.000Z","dependencies_parsed_at":"2022-09-13T09:22:44.404Z","dependency_job_id":null,"html_url":"https://github.com/zeshanshani/jquery-convert-to-background","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/zeshanshani%2Fjquery-convert-to-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeshanshani%2Fjquery-convert-to-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeshanshani%2Fjquery-convert-to-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeshanshani%2Fjquery-convert-to-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeshanshani","download_url":"https://codeload.github.com/zeshanshani/jquery-convert-to-background/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224188069,"owners_count":17270366,"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":["backgroundimage","images","imagetobackground","jquery","jquery-plugin"],"created_at":"2024-11-12T00:04:03.955Z","updated_at":"2024-11-12T00:04:04.490Z","avatar_url":"https://github.com/zeshanshani.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Convert To Background\nThis jQuery plugin takes the very first image of an element and convert it into the background image. This also keeps the normal image tag in place for SEO purposes.\n\nIt works best in situations when you want to have a square image but the image's size itself is not square. So this plugin will convert it into the background image and apply it to the targeted element and then make sure the image remains square all the time.\n\n\u003ca href=\"https://zeshanshani.github.io/jquery-convert-to-background/demo.html\" target=\"_blank\"\u003eView Demo\u003c/a\u003e\n\n## Options\n\n* `size`: set the image background size. *default is `cover`*\n* `responsive`: set to 'true' if you want the element to resize as a normal image on responsive devices. *default is `false`*\n* `position`: set the image background position. *default is `center center`*\n* `width`: set a custom width of the box, applies on the container. *default is blank,*\n* `height`: set a custom height of the box, applies on the container. *default is blank*\n* `repeat`: set the image background repeat. *default is `no-repeat`*\n* `attachment`: set the image background attachment. *default is blank*\n* `fallbackSrc`: set a fallback image URL. *default is blank*\n\nFollowing properties are all CSS properties so you can use same values as in CSS: `size` `position` `width` `height` `repeat` `attachment`\n\n## Downlaod\n\n### Via NPM\n\nDownload this plugin using this NPM commend.\n\n```\nnpm i jquery-convert-to-background\n```\n\n### Regular\n\nSimply close this repository or download it as zip. After that, include the `jquery.convertToBackground.js` file in the head or footer of your HTML page.\n\n``` HTML\n\u003cscript src=\"/js/jquery.convertToBackground.js\"\u003e\u003c/script\u003e\n```\n\nYou can also use the minified version, which is: `jquery.convertToBackground.min.js`\n\n## Usage\n\n``` JS\n$('.element-that-has-img').convertToBackground({\n  // size: 'cover',\n  // responsive: false,\n  // position: 'center center',\n  width: 300,\n  height: 200,\n  // repeat: 'no-repeat',\n  // attachment: '',\n  // fallbackSrc: '',\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeshanshani%2Fjquery-convert-to-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeshanshani%2Fjquery-convert-to-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeshanshani%2Fjquery-convert-to-background/lists"}