Cacher is the code snippet organizer for pro developers

@import url(http://fonts.googleapis.com/css?family=Rationale);

html, body {
  height: 95%;
  width: 95%;
  padding: 0;
  margin: 0;
  font-family: 'Rationale', sans-serif;
  text-align:center;
  color:#fdfdfd;
}
.imageOfDay{
  position:absolute;
  bottom:0;
  right:0;
  color:#fdfdfd;
  background: #333;
  padding:0.5em 1em;
}
.imageOfDay img {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  background:#f55;
}

// Get class
var imageOfDay = document.querySelector('.imageOfDay'),
    date = new Date();
// get hour
now = date.getHours(),
  // time
  thisHour = date.getHours() +':'+date.getMinutes(),
  // url sample photos  
  url = 'http://upload.wikimedia.org/wikipedia/commons',
  // Paths of photos
  inTheMorning = url+
  '/2/29/Colours_in_the_Morning.jpg',
  inTheAfternoon = url+
  '/e/e4/Afternoon_Stroll_-_M.M._Jacobi.png',
  inTheEvening = url+
  '/7/71/Taichung_Skyline_in_the_evening.JPG',
  AtNight = url+
  '/d/d4/New_York_City_at_night_HDR_edit1.jpg';

// At night 22 
if( now>=22){
  imageOfDay.innerHTML = 'At night '+ 
    thisHour +
    '<img src="'+AtNight+'"/>';
}else if( now>=18){
  imageOfDay.innerHTML = 'In the evening '+ 
    thisHour +
    '<img src="'+inTheEvening+'"/>';
}else if( now>=12){
  imageOfDay.innerHTML = 'In the afternoon '+ 
    thisHour +
    '<img src="'+inTheAfternoon+'"/>';
}else if( now>=6){
  imageOfDay.innerHTML = 'In the morning '+ 
    thisHour +
    '<img src="'+inTheMorning+'"/>';
}else{
  imageOfDay.innerHTML = 'At night '+ 
    thisHour +
    '<img src="'+AtNight+'"/>';
}



// Snow
window.onload = function(){
  //canvas init
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      W = screen.availWidth,
      H = screen.availHeight;
   
  canvas.width = W/2;
  canvas.height = H/1.33;
  
  var mp = 25; //max particles
  var particles = [];
  for(var i = 0; i < mp; i++){
    particles.push({
      x: Math.random()*W, //x-coordinate
      y: Math.random()*H, //y-coordinate
      r: Math.random()*4+1, //radius
      d: Math.random()*mp //density
    })
  }
  
  //Lets draw the flakes
  function draw(){
    ctx.clearRect(0, 0, W, H);
    
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.beginPath();
    for(var i = 0; i < mp; i++){
      var p = particles[i];
      ctx.moveTo(p.x, p.y);
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
    }
    ctx.fill();
    update();
  }
  
  var angle = 0;
  function update(){
    angle += 0.01;
    for(var i = 0; i < mp; i++){
      var p = particles[i];
      p.y += Math.cos(angle+p.d) + 1 + p.r/2;
      p.x += Math.sin(angle) * 2;
      
      if(p.x > W+5 || p.x < -5 || p.y > H){
        if(i%3 > 0){
          particles[i] = {
            x: Math.random()*W, 
            y: -10, r: p.r, d: p.d};
        }else{
          if(Math.sin(angle) > 0){
            //Enter from the left
            particles[i] = {
              x: -5, y: Math.random()*H, 
              r: p.r, d: p.d};
          }else{
            particles[i] = {
              x: W+5, 
              y: Math.random()*H, 
              r: p.r, 
              d: p.d};
          }
        }
      }
    }
  }
  setInterval(draw, 33);
}

 
<div class="main">
  <h1>Moments of the day</h1>
  <p>Change the background depending on time of day</p>
</div>
 
<canvas id="canvas"></canvas>
<div class="imageOfDay"></div>