Random change images

Hello mans!
I have six photos with name cin[1-6].gif
I have a one div with class cinema
I want to change background-image of div when I reload page.

I connect jQuery in Head

<script type="text/javascript" src="${resourcesFolderName}/jquery-2.2.1.js"></script>

Then I write a random function in Head of HTML and I try to change my backgound-image. I get this code in header:

<script type="text/javascript" src="${resourcesFolderName}/jquery-2.2.1.js"></script>
<script>
	
	function rand(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
	}

	$(".cinema").css ({
		"background":"url(${resourcesFolderName}/cin"+rand(1,7)+".gif) no-repeat !important",
		"background-size":"cover"
	})
	
	</script>

Why my code is doesn’t work?

You cannot have the no repeat where you have it. You have to make it a new entry. Also from what I am reading else where important may not work with jQuery.

$(".cinema").css({'background-image' : 'url(${resourcesFolderName}/cin' + rand(1,7) + '.gif)',
      'background-repeat': 'no-repeat',
      'background-size':'cover'
      });

Also

1, if you do not really need to put this in the head. Then you should put it in a Hype function and have it load at scene load.

2, it is not clear if you have manually put the jQuery link in your head or not. But if the file is in your resources then Hype will link it. Meaning you do not need to.

Thanks! Its works.