Connecting the custom CSS selectors together

Question

I had this working awhile ago, I had figured it out.

But I forgot to save it.

I do know it was hard for me to figure out, but I don’t remember what I did.

I figured this part out. https://jsfiddle.net/39ph4bvs/9/

I am doing something wrong here, but I can't seem to wrap my head around what I am doing incorrectly.

I can't wrap my head around how to fix the CSS.

My head hurts from trying to figure out how to do this.

It's only the CSS that is messed up.

All I am doing is adding custom css selectors which is giving me a hard time.

Ignore the videos, it's only the custom css selectors I am trying to get working. The css selectors have nothing to do with the videos. I don't need help with videos, I need help with implementing the custom css selectors.

I think this part I have fine.

This part is GOOD

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg3 {
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
}

.bg4 {
  --color-d: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-e: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-f: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-g: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-h: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-i: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

I got stuck here:

I have no idea why my head is confused on how this is done.

WRONG

body {
  background-image:
    linear-gradient(var(--color-a)),
    linear-gradient(var(--color-b)),
    linear-gradient(var(--color-c)),
    linear-gradient(var(--color-d)),
    linear-gradient(var(--color-e)),
    linear-gradient(var(--color-f)),
    linear-gradient(var(--color-g)),
    linear-gradient(var(--color-h)),
    linear-gradient(var(--color-i));
  background-repeat: no-repeat;
}

That part there is entirly wrong. I don't know how to fix it. There is a way for it to be written, I don't know how to do it.

Here was my second attempt: https://jsfiddle.net/qsb2kvca/2/

I have a working version here and I am still confused. https://jsfiddle.net/g9h4xLsv/

I have no idea why my head can’t figure this out.

WRONG

body {
  background-image:
    (var(--color-a)),
    (var(--color-b)),
    (var(--color-c)),
    (var(--color-d)),
    (var(--color-e)),
    (var(--color-f)),
    (var(--color-g)),
    (var(--color-h)),
    (var(--color-i));
  background-repeat: no-repeat;
}

That part there is entirly wrong. I don't know how to fix it. There is a way for it to be written, I don't know how to do it.

Here was my 3rd attempt: https://jsfiddle.net/8b0msnkL/3/

WRONG

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a)),
    linear-gradient(var(--color-b), var(--color-b)),
    linear-gradient(var(--color-c), var(--color-c)),
    linear-gradient(var(--color-d), var(--color-d)),
    linear-gradient(var(--color-e), var(--color-e)),
    linear-gradient(var(--color-f), var(--color-f)),
    linear-gradient(var(--color-g), var(--color-g)),
    linear-gradient(var(--color-h), var(--color-h)),
    linear-gradient(var(--color-i), var(--color-i));
  background-repeat: no-repeat;
}

That part there is entirly wrong. I don't know how to fix it. There is a way for it to be written, I don't know how to do it.

I tried reducing the code down to 1 line here:

https://jsfiddle.net/8b0msnkL/6/

That does not seem to be helping.

WRONG

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a));
  background-repeat: no-repeat;
}

That part there is entirly wrong. I don't know how to fix it. There is a way for it to be written, I don't know how to do it.

Answer 1

that ?

:root {
  --color-a: linear-gradient(120deg, #155799,     #159957      );
  --color-b: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-c: linear-gradient( 45deg, #102eff,     #d2379b      );
  --color-d: linear-gradient( 90deg, #360033 30%, #0b8793 100% );
  --color-e: linear-gradient(115deg, #0a0e88,     #00b1ce      );
  --color-f: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-g: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-h: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-i: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  }
body {
  background-image: var(--color-a);
  }

PO : Can you show me it working in the code?

(()=> //  === randomBackground == IIFE  
  {
  let colorOn = colorN = 0;
  setInterval(() =>
    {
    while (colorOn === colorN)
      colorN = Math.floor(Math.random() * 6);
    colorOn = colorN
    document.body.style.setProperty('--colorX', `var(--color-${colorOn})`)
    }
    , 5000);  // change backGround every 5 seconds
  }
 )()

:root {
  --color-0: linear-gradient(120deg, #155799,     #159957      );
  --color-1: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-2: linear-gradient( 45deg, #102eff,     #d2379b      );
  --color-3: linear-gradient( 90deg, #360033 30%, #0b8793 100% );
  --color-4: linear-gradient(115deg, #0a0e88,     #00b1ce      );
  --color-5: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-6: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */
  --color-7: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */
  --color-8: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */

  --colorX: var(--color-0);
  }
body {
  background-image : var(--colorX);
  height           : 100vh;
  margin           : 0;
  }

with no setInterval

let colorRandom = 'var(--color-' + Math.floor(Math.random() *9) + ')'
document.body.style.setProperty('--colorX',colorRandom)