Skip to content

Instantly share code, notes, and snippets.

@Lego2012

Lego2012/ACSS: Is Background from Automatic.css.md

Created February 12, 2025 02:25
Show Gist options
  • Save Lego2012/114a029d56c705235b78cd9db499c4e3 to your computer and use it in GitHub Desktop.
Save Lego2012/114a029d56c705235b78cd9db499c4e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ACSS: Is Background from Automatic.css.md

Docs: https://automaticcss.com/docs/is-background-is-bg/

:has(> .is-bg) {
  position: relative;
  isolation: isolate;
}
.is-bg {
  position: var(--bg-position, absolute);
  inset: var(--bg-inset, 0);
  inline-size: var(--bg-width, 100%);
  block-size: var(--bg-height, 100%);
  border-radius: var(--bg-radius, 0);
  z-index: var(--bg-z-index, -2);
}
:is(figure, picture).is-bg:has(> img) > img {
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  border-radius: var(--bg-radius, 0);
}
img.is-bg {
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment