Is there a way to dynamically change the background image in CSS based on the weather condition? I'm utilizing the wunderground API to retrieve the weather data, which is stored in the weather variable.
I am struggling with how to update the background dynamically depending on the weather condition.
Thank you for your help!
displayalerts(){
let weather = this.state.cond;
let alerts;
if (weather === "Snow")
{
alerts = ["check tire tread and pressure", "maintain safe stopping distances", "steer gently into skids"];
}
else if (weather === "Rain")
{
alerts = ["steer gently into skids"];
}
else if (weather === "Mostly Cloudy")
{
alerts = ["maintain safe stopping distances", "turn on fog lights"];
}
else if (weather === "Overcast")
{
alerts = ["check lights", "turn on fog lights"];
}
else if (weather === "Haze")
{
alerts = ["turn on fog lights"];
}
else if (weather === "Partly Cloudy")
{
alerts = ["check lights"];
}
else if (weather === "Sunny" || weather === "Clear")
{
alerts = ["Use the air conditioning"];
}
else {
alerts = ["No alerts available"];
}.container {
width: 414px;
display: flex;
flex-direction: column;
background-image: url('http://bestanimations.com/Nature/winter/winter-snow-nature-animated-gif-23.gif');
background-attachment: fixed;
background-size:cover;
color: #fff;
margin: 0 auto;
font-family: acumin-pro-condensed, sans-serif;
font-style: normal;
font-weight: 100;
}