Problems setting image based on temperature

1

Hi,
I am trying to set an image based on temperature but I get repeating images instead of the no-repeat and cover I set in the css. What do you think I am doing wrong?

<!DOCTYPE html>
<!--   -->
<html lang="en">
<head>
  <title>Change Image</title>
  <style>
  body { 
    background: url(../images/trees.jpg); 
    background-repeat: no-repeat;
    background-size: cover;      
    background-origin: content-box;
    padding-top: 40px;
	margin-top: 30px;
    margin-left: 55px;
    background-color: #8b9ab2; 
    color: #30270b;
	}
  </style>
  <script>
  
  //var body = document.getElementsByTagName("body")[0];

   var cTemp;
  cTemp = 363;
  
  function changeImage()
  {

switch (true) {
  case (cTemp > 353): // tempeture is greater than 90 
    
     document.getElementsByTagName("body")[0].style.background = "url(../images/water-fountain.jpg)"; 
     //document.getElementsByTagName("body")[1].style.background-repeat = no-repeat;
	 //document.getElementsByTagName("body")[2].style.background-size = cover;
   break;
  case ( cTemp > 353): // tempeture is greater than 80 
     document.getElementsByTagName("body")[0].style.background = "url(../images/trees.jpg)"; 
	 //document.getElementsByTagName("body")[1].style.background-repeat = no-repeat;
	// document.getElementsByTagName("body")[2].style.background-size = cover;
 
    break;
  case (cTemp >= 333): // tempeture is greater than 60
     document.getElementsByTagName("body")[0].style.background = "url(../images/blueskytrees.jpg)"; 
     //document.getElementsByTagName("body")[1].style.background-repeat = no-repeat;
	 //document.getElementsByTagName("body")[2].style.background-size = cover;	 
    // document.getElementsByTagName("body").style.background = url(../images/blueskytrees.jpg);
    break; // it encounters this break so will not continue into 'case 2:'
  case (cTemp > 313): // tempeture is greater than 40 
     document.getElementsByTagName("body")[0].style.background = "url(../images/pondwithducks.jpg)";
	 //document.getElementsByTagName("body")[1].style.background-repeat = no-repeat;
	// document.getElementsByTagName("body")[2].style.background-size = cover;
    // document.getElementsByTagName("body").style.background = url(../images/pondwithducks.jpg);
    break;
  default:
     document.getElementsByTagName("body")[0].style.background = "url(../images/pondwithducks.jpg)";
	 //document.getElementsByTagName("body")[1].style.background-repeat = no-repeat;
	 //document.getElementsByTagName("body")[2].style.background-size = cover;
}
  }
  </script>
</head>
<body onload = "changeImage()"> 

</body>
</html>
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

3

I have no idea what you want me a change here.

4

Nothing. :slight_smile: But your code wasn’t visible. By using 3 backticks before and after the code it will be visible.

5

OK. Thanks thanks for replying. This long because I need to meet the post requirement.

6

Currently on my phone, so I can’t test this, but have you tried changing:
document.getElementsByTagName("body")[0].style.background = "url(...)"

To:
document.getElementsByTagName("body")[0].style.backgroundImage = "url(...)"

7

Ben,Thanks for the suggestion. I also had to change the names in the body tag. For example background-repeat is backgroundRepeat. Ir works now but I will research the naming later.

1 Like
8

Hello,

I don’t really think you need to change the background based on temperature. I’m doing this as well, and Im going to use http://erikflowers.github.io/weather-icons/

So you can do a if(isSunny){ } type of thing.

10

Actually background property is short syntax for all background-* properties (background = background-color backround-image background-position background-repeat .... So when you use it with only value, the rest of values are set to default. If you only want to change the background image, then use background-image property. For example I write

body
{
    color: #eee;
    background-image: (../image.png);
    backround: #3d3d3d;
}

The last background property will reset the background-image property.

11

Thanks. It wasn’t that much to get the images to change. Thanks for your suggestion.