Learn how to change background based on time of day. Set different background images and greetings to show your website users in different times of the day. I was thinking one day that it would be nice to show different greetings to my website users based on their local time. So, I started searching for some code around the web. I knew that PHP might help to reach my objective, but I was glad to find out the JavaScript manage to make it work too.

Are you interested in the subject? Follow this quick tutorial to figure out how it’s done.

How to change background image based on time of day in Divi

Preview

The website Stack Overflow helped me a lot to figure out how to make this work. This post here with the help of Gareth Hayes pen made I finally achieve the knowledge I was looking for.

Now it’s your turn, let’s do this!

Add this feature into Divi theme

First of all, you need to create a section and add the ID greeting to it. You can name it whatever you like, it’s just what I’ll use in this tutorial.

I recommend using a plugin to handle all the CSS and JS changes.

Go to Divi > Theme Options > Custom CSS and add the following code:

.morning, .afternoon, .evening {
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.morning {
  background-image: url(morning.jpeg); /* Change the url of the image */
}

.afternoon {
  background-image: url(afternoon.jpeg); /* Change the url of the image */
}

.evening {
  background-image: url(evening.jpeg); /* Change the url of the image */
}

This is just a basic CSS edit of the greeting good morning, good afternoon and good evening.

You can edit it in the way it better fits your needs.

The real magic happens with the JS code.

Add the following code snippet inside Divi > Theme Options > Integration > Add code to the < head > of your blog:

Don’t forget to add the code between <script> tags!

jQuery(document).ready(function( $ ){

var thehours = new Date().getHours();
	var themessage;
	var morning = ('Good morning');
	var afternoon = ('Good afternoon');
	var evening = ('Good evening');

	if (thehours >= 0 && thehours < 12) {
		themessage = morning;
    $("#greeting").addClass("morning");

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
    $("#greeting").addClass("afternoon");

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
    $("#greeting").addClass("evening");
	}

	$('#greeting').append(themessage);
  
});

That’s it! Basically, this code adds and removes the classes you added in the Custom CSS inside the id greeting.

In this example above, the morning hours are from midnight to noon; the afternoon hours are from noon to 17:00 o’clock; and evening hours are from 17:00 o’clock to midnight.

This feature can be used in contact pages to surprise your costumers with a neat greeting in the right time of the day.

Conclusion

Did you like this tutorial about how to change background based on time of day?

Leave a comment or send me and email if you liked it.

Hope I could help you somehow.

See ya!