Marius Eisenbraun

Posted on Jan 9, 2020

What would you like to know about CSS?

#question #css #webdev #learning

Hey, my front-end-friends!

There are many css tutorials and code-snippets out there, but maybe you got a topic that is not covered or just didn't find the right solution?

Tell me in the comments, what you would like to know about CSS.

Hopefully I later can explain it in a short posting or other nice web-devs will give you some hints/links/examples.

Let's share our knowledge! 🙌

Top comments (3)

SJellen • Jan 9 '20

I’m working on a dark mode and it’s going well with css var() but I’m trying to have different background-image() for light and dark. But I can’t seem to figure it out.

I’ve got a work around now using and opacity but it’s not very clean.

Thanks

Marius Eisenbraun • Jan 10 '20

I guess, you try to set the background-image with a custom property like:

:root {
  --backgroundimage: http://example.com/bg-image-light.jpg;
}

And later try to set the image with

body {
  background-image: url(var(--backgroundimage));
}

is that correct?

Custom Properties behave different than variables in e.g. JS.

In CSS custom properties, you need to store a value, that is a valid CSS value.

So this should work:

:root {
  --backgroundimage: url('http://example.com/bg-image-light.jpg');
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundimage: url('http://example.com/bg-image-dark.jpg');
  }
}

body {
  background-image: var(--backgroundimage);
}

I hope, I could help you with your problem!
Of not, please explain a bit more details and add a code example.

Adam Crockett 🌀 • Jan 9 '20

I want to know, what happened to CSS shaders 😭

DEV Community

What would you like to know about CSS?

Top comments (3)

Custom Properties behave different than variables in e.g. JS.

So this should work:

Read next

High Level requirements and purposes

Launching a website offline without the Internet using Service Worker (English version)

Running VLC in the Browser

Setup path aliases in React + Vite + TS Project 🤓