{"id":19826292,"url":"https://github.com/linkstackorg/background-check","last_synced_at":"2025-07-26T16:42:20.098Z","repository":{"id":211086779,"uuid":"728158342","full_name":"LinkStackOrg/background-check","owner":"LinkStackOrg","description":"Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.","archived":false,"fork":false,"pushed_at":"2023-12-06T13:01:45.000Z","size":1963,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T09:18:20.263Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinkStackOrg.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,"governance":null}},"created_at":"2023-12-06T10:57:39.000Z","updated_at":"2024-05-28T09:12:19.000Z","dependencies_parsed_at":"2023-12-06T12:34:02.528Z","dependency_job_id":"9c289489-9bdd-4509-9554-4875e207ed65","html_url":"https://github.com/LinkStackOrg/background-check","commit_stats":null,"previous_names":["linkstackorg/background-check"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinkStackOrg%2Fbackground-check","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinkStackOrg%2Fbackground-check/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinkStackOrg%2Fbackground-check/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinkStackOrg%2Fbackground-check/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinkStackOrg","download_url":"https://codeload.github.com/LinkStackOrg/background-check/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241181767,"owners_count":19923506,"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-11-12T11:09:58.983Z","updated_at":"2025-02-28T16:33:45.082Z","avatar_url":"https://github.com/LinkStackOrg.png","language":"JavaScript","readme":"# BackgroundCheck\n\nAutomatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.\n\n**Examples**\n\n+ [Project Page](http://linkstackorg.github.io/background-check/)\n+ [Slider](http://linkstackorg.github.io/background-check/slider.html)\n+ [Fixed Nav](http://linkstackorg.github.io/background-check/fixed-nav.html)\n+ [CSS Backgrounds](https://linkstackorg.github.io/background-check/css-backgrounds.html)\n+ [CSS Backgrounds \u0026mdash; Fullscreen](https://linkstackorg.github.io/background-check/css-backgrounds-fullscreen.html)\n+ [Cross-Origin Request](https://linkstackorg.github.io/background-check/cross-origin.html)\n+ [Cross-Origin Request \u0026mdash; CSS Backgrounds](https://linkstackorg.github.io/background-check/cross-origin-css.html)\n\n**Using BackgroundCheck with other plugins**\n\n+ [FlexSlider \u0026mdash; Slide](https://linkstackorg.github.io/background-check/flexslider.html)\n+ [FlexSlider \u0026mdash; Fade](https://linkstackorg.github.io/background-check/flexslider-fade.html)\n\n## How it works\n\nIf an element overlaps any of the images, either `.background--dark` or `.background--light` is added to it. BackgroundCheck does not change an element's style \u0026mdash; you must do so using CSS.\n\nFor example, if `\u003cp\u003e` has the following default style:\n\n```css\np {\n  color: white;\n}\n```\n\nyou can then add the following:\n\n```css\np.background--light {\n  color: black;\n}\n```\n\nClasses are only added if the element overlaps an image. An element is considered to overlap an image if at least 50% (configurable) of it's area is covering that image.\n\n### Complex backgrounds\n\nThe light and dark classes work well with simple backgrounds, but you might require an additional level of control for elaborate backgrounds. BackgroundCheck adds `.background--complex` to an element if its background exceeds a certain level of complexity.\n\nThis class can be used as an intermediate state:\n\n```css\np.background--light {\n  color: black;\n}\n\np.background--dark {\n  color: white;\n}\n\np.background--complex {\n  color: gray;\n}\n```\n\nor:\n\n```css\np.background--dark.background--complex {\n  color: #ccc;\n}\n\np.background--light.background--complex {\n  color: #aaa;\n}\n```\n\n## How to use\n\n**Initialize**\n\n```javascript\n// Check all elements with a .target class against all images on a page\nBackgroundCheck.init({\n  targets: '.target'\n});\n\n// Specific images\nBackgroundCheck.init({\n  targets: '.target',\n  images: '.thumbnails'\n});\n```\n\n**Reprocess**\n\n```javascript\n// All targets\nBackgroundCheck.refresh();\n\n// Specific target\nBackgroundCheck.refresh(target);\n```\n\n**Setters and getters**\n\n```javascript\n// Get current targets\nBackgroundCheck.get('targets');\n\n// Change targets\nBackgroundCheck.set('targets', '.header');\n```\n\n**Stop**\n\n```javascript\nBackgroundCheck.destroy();\n```\n\n## Attributes\n\nUsed with `.init()`, `.set()` or `.get()`\n\n+ **targets**: Elements to be processed. *Type:* String, Element or Nodelist. *Required*.\n+ **images**: Images to be used. *Type:* String, Element or NodeList. *Default:* All images on page.\n+ **changeParent**: Determines if classes are added to a target or to its parent. *Default:* false.\n+ **threshold**: Midpoint between dark and light. *Default:* 50 (%).\n+ **minComplexity**: Minimum image complexity required before the *complex* class is added to a target. *Default:* 30 (%).\n+ **minOverlap**: Minimum overlap required between an element and any of the images for that element to be processed. *Default:* 50 (%).\n+ **classes**: Classes added to targets. *Default:* `{ dark: 'background--dark', light: 'background--light', complex: 'background--complex' }`\n+ **windowEvents**: Reprocess on window resize and scroll. *Default:* true.\n+ **maxDuration**: Maximum processing time allowed. Killed if it takes longer. *Default:* 500 (ms).\n+ **mask**: Used internally when checking if an element overlaps any of the images. *Default:* `{ r: 0, g: 255, b: 0 }`\n+ **debug**: Enable or disable logs. *Default*: false.\n\n## CSS Backgrounds\n\nBackgroundCheck can also be used on an element that has a `background-image`. For example:\n\n```css\n.thumbnail {\n  background-image: url(image.jpg);\n}\n```\n\n```js\nBackgroundCheck.init({\n  targets: '.target',\n  images: '.thumbnail'\n});\n```\n\n**Background Position and Size**\n\nTested with the following units:\n\n+ `background-size`: cover, contain, auto, inherit, cm, em, px and %\n+ `background-position`: top, left, center, right, bottom, inherit, cm, em, px and %\n\n**Current Limitations**\n\n+ `background-repeat` is not supported and is forced to `no-repeat`\n+ `background-origin` is forced to `padding-box`\n+ Multiple backgrounds are not supported\n+ Four-value syntax can be used if the browser [supports it](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Specifications)\n\n## Browser Support\n\n![output-onlinepngtools](https://github.com/LinkStackOrg/background-check/assets/60265788/300dc498-cbce-44fe-bcf6-74b7d1d386c3)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkstackorg%2Fbackground-check","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinkstackorg%2Fbackground-check","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkstackorg%2Fbackground-check/lists"}