JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my-div">
</div>

CSS

#my-div {
    height: 200px;
    width: 200px;
}

JavaScript

const images = [
	{begin: 6, end: 11, img: 'http://placehold.it/200x200/fff/000'},
  	{begin: 11, end: 18, img: 'http://placehold.it/200x200/f00/fff'},
  	{begin: 18, end: 21, img: 'http://placehold.it/200x200/0f0/fff'},
  	{begin: 21, end: 30, img: 'http://placehold.it/200x200/00f/fff'}
]

let hour = new Date().getHours()
hour = hour <= 6 ? hour + 24 : hour

const image = images.filter(img => hour > img.begin && hour <= img.end).pop().img

document.querySelector('#my-div').style.backgroundImage = `url('${image}')`