How Can I use two differents CSS backgrounds in Angular? - css

Question

I would like to change the background based on a boolean.
If I have two backgrounds in CSS:
.background {
background-image: url('../assets/images/Background.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 670px;
#media screen and (min-width: 1920px) {
background-size: 100% 800px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 1200px;
}
}
.performance-background {
background-image: url('../assets/images/Background-performance.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 335px;
#media screen and (min-width: 1920px) {
background-size: 100% 325px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 325px;
}
}
I would like to use something similar to:
[ngClass]="{ 'background': displayBackground, 'performance-background': displayPerformanceBackground}"
Thank you so much.

Answer 1

You can add different classes depending of a boolean state using angular ngClass and a ternary operator in a HTML tag
example:
HTML:
<div [ngClass]="boolean ? 'trueClass' : 'falseClass'"> Example Text</div>
"boolean" is a variable and if it is set to true the html tag will use "trueClass" class, else "falseClass"
CSS:
.trueClass{
background: red
}
.falseClass{
background:blue
}