Cacher is the code snippet organizer for pro developers

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

body{
  /*   background-color: #e3eaf4; */
  font-size: 1.2em; 
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.back-img{
  background: url('https://upload.wikimedia.org/wikipedia/commons/5/56/Clear_sky_over_Riga%2C_2008.jpg');
   background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% top;
    background-attachment: fixed;
}

h1{
  font-size:1.5em;
  color: Navy;
  font-family: 'Emblema One', cursive;
}

span{
  /*   color: MidnightBlue; */
  /*   font-size: 1em; */
}

.cel-fahr{
  color: Red;
  cursor:pointer;
}

.fa{
  color: Navy;
  font-size: 1.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

$(document).ready(function(){  

  $.ajaxSetup({ cache: false });

  // beginning HTML5 Geolocation

  // if ("geolocation" in navigator){
  //   navigator.geolocation.getCurrentPosition(function(position){ 
  //     $("#result").html("<br />Lat : " + position.coords.latitude + " </br>Lang :" +  position.coords.longitude);
  //   });
  // }else{
  //   console.log("Browser doesn't support geolocation!");
  // }

  // end

  if ("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(function(position){         

      $.ajax({
        url: "https://fcc-weather-api.glitch.me/api/current?lon=" + position.coords.longitude + "&lat=" + position.coords.latitude,
        jsonCallback: "callback",
        dataType: "json",
        success: function(location) {

          $('#country').html(location.sys.country);
          $('#city').html(location.name);
          $('#latitude').html(location.coord.lat);
          $('#longitude').html(location.coord.lon);

          $('#weather-main').html(location.weather[0].main);
          $('#weather-descrip').html((location.weather[0].description).replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}));

          $('#weather-icon').html("<img src='" + location.weather[0].icon  + "'>");

          var cel = Math.round(location.main.temp);

          $('#temperature').html(cel + '° C ');

          $('#celsius').click(function(){
            $('#temperature').html(cel + '° C');      
          });

          //convert Celsius to Farenheit
          $('#fahrenheit').click(function(){
            function toFahrenheit(c){
              return (c * 1.8) + 32;
            }
            document.getElementById('temperature').innerHTML = Math.round(toFahrenheit(location.main.temp))  + '° F';      
          });

          var utcSeconds = location.sys.sunrise;
          var sunRise = new Date(0); 
          sunRise.setUTCSeconds(utcSeconds);

          var utcSeconds = location.sys.sunset;
          var sunSet = new Date(0); 
          sunSet.setUTCSeconds(utcSeconds);

          $('#sunrise').html(sunRise.toLocaleTimeString() + ', ' + sunRise.toDateString());
          $('#sunset').html(sunSet.toLocaleTimeString() + ', ' + sunSet.toDateString());

          var objectImages = {
            clouds: "url('https://static.pexels.com/photos/158163/clouds-cloudporn-weather-lookup-158163.jpeg')",
            sleet: "url('http://www.abccolumbia.com/wp-content/uploads/2016/01/Image4.jpg')",
            rain: "url('http://weknowyourdreams.com/images/rain/rain-01.jpg')",            
            wind: "url('https://energy.gov/sites/prod/files/wv_theme1_image.jpg')",        
            snow: "url('http://media.idownloadblog.com/wp-content/uploads/2016/01/bokeh-snow-flare-water-white-splash-pattern-9-wallpaper.jpg')",         
            fog: "url('https://www.howitworksdaily.com/wp-content/uploads/2014/08/fog-06.jpg')",         
            storm: "url('http://weknowyourdreams.com/images/storm/storm-07.jpg')", 
            sun: "url('https://s.yimg.com/os/mit/media/m/weather/images/fallbacks/lead/clear_d-e618500.jpg')",
            hail:"url('http://kotv.images.worldnow.com/images/13543289_G.jpg')",   
            clear:"url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/bright-sun-in-blue-sky.jpg')",            haze:"url('https://i.ytimg.com/vi/th0JAKGp6PI/maxresdefault.jpg')",
            mist:"url('https://vignette1.wikia.nocookie.net/demigodshaven/images/f/f5/Mist.jpg/revision/latest?cb=20110102163040')",
            drizzle:"url('https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2017/nasasolvesad.jpg')",
            thunderstorm:"url('http://s.hswstatic.com/gif/thunderstorm-orig.jpg')"
          };

          if(objectImages.hasOwnProperty(location.weather[0].main.toLowerCase())){
            $('.back-img').css("background-image", objectImages[location.weather[0].main.toLowerCase()]);
          }else{
            $('.back-img').css("background-image", "url('https://i.pinimg.com/originals/ac/dd/14/acdd14fd774d6434ccac1e21532aa143.jpg')");
          }      

          //images backgrounds with google  

          //       $('.back-img').attr('src', $('img:first').attr('src'));

          //       $('.back-img').css(
          //         "background-image",
          //         $('img:first').css("url('https://www.google.co.uk/search?tbm=isch&q=" + "clouds" + "')" )       
          //       ); 

          //$('.back-img').css("background-image", randomImage);

        }
      });
    });
  }else{
    $("#result").html("Browser doesn't support geolocation!");
  }
})

  <body onload="getLocation" class="back-img">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
      <h1>Show the Local Weather App</h1>

      <div id="result"></div>

      <i class="fa fa-globe" aria-hidden="true"></i>  <i class="fa fa-location-arrow" aria-hidden="true"></i>
      <div>Country: <b><span id="country"></span></b></div>
      <div>City: <b><span id="city"></span></b></div>

      <br>
      <i class="fa fa-compass" aria-hidden="true"></i> <i class="fa fa-map-marker" aria-hidden="true"></i>
      <div>Latitude: <b><span id="latitude"></span></b></div>
      <div>Longitude: <b><span id="longitude"></span></b></div>

      <br>
      <i class="fa fa-cloud" aria-hidden="true"></i> <i class="fa fa-snowflake-o" aria-hidden="true"></i>
      <div>Weather: <b><span id="weather-main"></span></b></div>
      <div> -<b><span id="weather-descrip"></span></b>-</div>
      <div> <span id="weather-icon"></span></div>  

      <br>
      <i class="fa fa-thermometer-quarter" aria-hidden="true"></i> <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>
      <div>Temperature: <b><span id="temperature"></span></b>
      </div>

      <div><span id ="celsius" class="cel-fahr"><strong> °C</strong> </span>|<span id="fahrenheit" class="cel-fahr"><strong> °F</strong></span></div>   

      <br>
      <i class="fa fa-sun-o" aria-hidden="true"></i> <i class="fa fa-moon-o" aria-hidden="true"></i>
      <div>Sunrise at <b><span id="sunrise"></span></b></div>
      <div>Sunset at <b><span id="sunset"></span></b></div> 
          </div>
        </div>
    </div>
  </body>