CSS background that changes based on time

**gosteelers** · 12-14-2009, 01:13 AM

Hello,

While visiting http://www.aeromexico.com/en_us/ I noticed that if you visit the time during the day, the background on the website features "sunny clouds" in the afternoon the background changes to sunset, at night, it shows night with starts. I looked at the CSS code and could not quiet figure the script out, any help?

Here's the direct link to the .CSS http://aeromexico.com.lg1x8zmax.simp...t=200912101026

**jscheuer1** · 12-14-2009, 03:26 AM

This smells like a server side setup that may or may not have a javascript component. It could all be done with javascript though. Using the javascript date object, one may determine the time of day as reported by the user's computer and show a different background-image based based upon that.

Something like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
	var now = new Date().getHours(),
	pics = ['http://i19.tinypic.com/2mdl82c.jpg', 'http://s4.tinypic.com/2u55qj8_th.jpg', 'http://s4.tinypic.com/2qkqjjt_th.jpg'];
	now = now > 5 && now < 12? 0 : now >= 12 && now < 19? 1 : 2;
	document.documentElement.style.backgroundImage = 'url(' + pics[now] + ')';
})();
</script>
</head>
<body>

</body>
</html>

**jscheuer1** · 12-14-2009, 05:13 PM

Here's a more robust example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color: transparent;
}
</style>
<script type="text/javascript">
/* Time of Day Background Script ©2009 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */
(function(){
	var now, pics = {
		morning: 'http://i19.tinypic.com/2mdl82c.jpg',
		afternoon: 'http://s4.tinypic.com/2u55qj8_th.jpg',
		night: 'http://s4.tinypic.com/2qkqjjt_th.jpg',
		show: function(){
			return now > 5 && now < 12? this.morning : now > 11 && now < 19? this.afternoon : this.night;
		}
	};(function(){
		now = new Date().getHours();
		document.documentElement.style.backgroundImage = 'url(' + pics.show() + ')';
		if(typeof pics.interval === 'undefined'){
			pics.interval = setInterval(arguments.callee, 10000);
		}
	})();
})();
</script>
</head>
<body>

</body>
</html>

**gosteelers** · 12-15-2009, 12:16 AM

Awesome!

Thanks.

Originally Posted by jscheuer1

Here's a more robust example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color: transparent;
}
</style>
<script type="text/javascript">
/* Time of Day Background Script ©2009 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */
(function(){
	var now, pics = {
		morning: 'http://i19.tinypic.com/2mdl82c.jpg',
		afternoon: 'http://s4.tinypic.com/2u55qj8_th.jpg',
		night: 'http://s4.tinypic.com/2qkqjjt_th.jpg',
		show: function(){
			return now > 5 && now < 12? this.morning : now > 11 && now < 19? this.afternoon : this.night;
		}
	};(function(){
		now = new Date().getHours();
		document.documentElement.style.backgroundImage = 'url(' + pics.show() + ')';
		if(typeof pics.interval === 'undefined'){
			pics.interval = setInterval(arguments.callee, 10000);
		}
	})();
})();
</script>
</head>
<body>

</body>
</html>

Thread: CSS background that changes based on time

Thread Tools

Search Thread

CSS background that changes based on time

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions