Using CSS Variables (custom properties) in a Pseudo-class

Asked Feb 22 '19 at 12:40

Active Feb 22 '19 at 13:16

Viewed 1,763 times

I have tried the below code. But its not working.

    .coin:before{
       background-image:var(--dynamic-image);
     }

And I want to pass --dynamic-image from a method inside component. I am using Angular Renderer2 and the element that I want set background for is this.flip.

    flipCoin() {
      this.renderer.setStyle(this.flip.nativeElement, '--dynamic-image' , "url('https://www.w3schools.com/howto/img_forest.jpg')");
    }

Am I doing anything wrong here ??

edited Feb 22 '19 at 13:16

asked Feb 22 '19 at 12:40

Asridh Kumar

https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url – Paulie_D Feb 22 '19 at 12:57
Paulie_D does this mean we cannot use css variables for url ?? – Asridh Kumar Feb 22 '19 at 13:04
Yep...thats' exactly what it means. – Paulie_D Feb 22 '19 at 13:21
if you know any other alternative approach to meet my requirement..let me know ? – Asridh Kumar Feb 22 '19 at 13:22
@Paulie_D we can use them for url when it's not inside the *url* like this case – Temani Afif Feb 22 '19 at 14:30

Using CSS Variables (custom properties) in a Pseudo-class

0 Answers0