How to use :root, instead of a class

OK?

As I said, there is really no point in using custom properties then. If you are going to set a class and that class has the CSS then just set the background-color property inside each class.

Why are you using custom properties in your code? What is the point? Unless you plan to overwrite the values, I don’t really see the point.

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-repeat: no-repeat;
}

.bg1 {
  background-image: linear-gradient(76.9deg, #e8bbf2, #8787fd 51.66%, #84caff 109.18%);
}

.bg2 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  background-image: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
}

Just as an aside. What is it with your obsession with IIFEs? Why is your code always wrapped inside IIFEs?

The point of setting it in the JS is so it can be dynamic. For example.


Just to be clear. I’m not super interested in having a conversation with some unknown person with you as the middleman. Sorry if I sound annoyed but it kind of is a bit annoying, to be honest.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.