I am currently creating a questionnaire that consists of 10 questions and calculates a score called total. If the total < 10, I want the screen to turn red. However, this required me to remove the previous wallpaper that was set:
/*body{
background-image: url("twins.jpg");
}*/ <-- now commented out
In order for this code to function as intended:
if (total < 10){
alert("...RED SCREEN OF DEATH!");
document.body.style.backgroundColor = "#AA0000";
}
Now, when a user scores below 10, the screen successfully turns red. However, this only solves half of the issue.
My next challenge is to have twins.jpg be the background before the screen changes to red. I want twins.jpg to be the wallpaper first, then switch to red when total < 10.
My main question is, what is the correct method to achieve this so that I can still observe my background changing to red when total < 10? When I try this:
body{
background-image: url("twins.jpg");
}
It does change the background to twins.jpg, but it covers the red when the color change occurs, making it invisible.