Time-based CSS Background using JavaScript

HTML

<body>
  <div id="bg">
    <h1>Background based on time of day</h1>
    <h4>JavaScript applies a CSS class to change the background image based on the time of day of the user's browser.</h4>
  </div>
</body>

CSS

body {margin:0 50px;font-family: sans-serif}
/*reset*/ h1,h4 {margin:0}


/* basic styles */
h1 { margin-bottom: 10px; }
div { 
  width: 680px;
  padding: 10px 25px;
  margin: 50px auto;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.4); 
  color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-blue-sky_1600x1200_78556.jpg'); }
.sunset { background: url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night-sky.jpg'); }

JavaScript

$(document).ready(function(){
	var d = new Date();
	var n = d.getHours();
	if (n > 19 || n < 6)
 		// If time is after 7PM or before 6AM, apply night theme to ‘body’
 		document.body.className = "night";
	else if (n > 16 && n < 19)
 		// If time is between 4PM – 7PM sunset theme to ‘body’
 		document.body.className = "sunset";
	else
 		// Else use ‘day’ theme
 		document.div.id.className = "day";
});