Time-based CSS Background

Developer
James Barnett
Size
2,664 Kb
Views
30,360
  1. Time-based CSS Background Previews
  2. Time-based CSS Background HTML Codes
  3. Time-based CSS Background CSS Codes
  4. Time-based CSS Background JS Codes

How do I make an time-based css background?

Change the background image based on the time of day of the user's browser using JavaScript. What is a time-based css background? How do you make a time-based css background? This script and codes were developed by James Barnett on 11 August 2022, Thursday.

Time-based CSS Background Previews
IQ Test

Time-based CSS Background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Time-based CSS Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*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'); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Time-based CSS Background - Script Codes CSS Codes

/*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'); }

Time-based CSS Background - Script Codes JS Codes

$(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.body.className = "day";
});
Time-based CSS Background - Script Codes
Time-based CSS Background - Script Codes
Home Page Home
Developer James Barnett
Username jamesbarnett
Uploaded August 11, 2022
Rating 4
Size 2,664 Kb
Views 30,360
Do you need developer help for Time-based CSS Background?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Barnett (jamesbarnett) Script Codes
Name
CSS speech bubble
Marquee using CSS3 keyframe animation
Top Left Rounded Corner in CSS
Github-style Daily Activity Chart
Ready to Launch
Search field
Simple CSS Checkboxes with Font Awesome
Console.log output in codepen
Piet Mondrian Composition II
Demo of the US Map jQuery plugin
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!