Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow setting background images using CSS variables #8

Open
dawaltconley opened this issue Nov 14, 2023 · 1 comment
Open

Allow setting background images using CSS variables #8

dawaltconley opened this issue Nov 14, 2023 · 1 comment
Labels
enhancement New feature or request

Comments

@dawaltconley
Copy link
Owner

This is the cleanest way to handle combining responsive backgrounds with other background layers like linear-gradient. The backgroundFromSizes method would return this:

@media ${selectors} {
  ${selector} {
    ${varName}: url('${q.url}');
  }
}

Only unsure if this should be the default or if I should even support returning background-image. It's easy enough to make this a default for varName, but disallowing it would allow setting :root as a default selector, fewer required variables.

@dawaltconley dawaltconley added the enhancement New feature or request label Nov 14, 2023
@dawaltconley
Copy link
Owner Author

Possibly the way to do this with least CSS and easiest way to bundle media queries is to pass a map of variable names => images to backgroundFromSizes and assign all these variables to :root or a common selector (.responsive-bg or something). Easier to add to global css?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant