Load random tiled image into style/background-CodePudding

I currenly utilize this function to randomly fetch an image

<script>
window.onload = choosePic;
var myPix = new Array(
"https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif",
"https://ptgmedia.pearsoncmg.com/images/chap4_9780321996701/elementLinks/04fig15.jpg");
function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];}
</script>

<style> body {background-image: url(myPicture);}</style>

<!--<img src="https://pt" width="305" height="312" id="myPicture">-->

However it won't load into the bg as part of the css.

CodePudding user response：

Got it:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#random{
  width: 100%;
  height: 100%;
  //border: 1px solid black;
  background-image: url('');
  //background-position: center center;
  //background-size: cover;
  //background-repeat: no-repeat;}
</style>
<body>
<body onl oad="randombg()"><div id="random" ></div>  
  <script>
function randombg(){
  var random= Math.floor(Math.random() * 6)   0;
  var bigSize = ["url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')"];
  document.getElementById("random").style.backgroundImage=bigSize[random];}</script>

Option #2

<style>
.random_bg{
    height: 100%;
    width: 100%;
    position: relative;}
</style>
<section><div >
 <div >
<div >
 <div ></div>
</section>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
 <script>function pic() {var bgm = ['https://i.ibb.co/9mxH8pL/Castillo.gif',
'https://i.ibb.co/fkK7bK2/Elec-Tower.gif',
'https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif',
'https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif',
'https://i.ibb.co/LJKnfhh/Scilab.gif'];
    $('.random_bg').css({
        'background' : 'url('  bgm[Math.floor(Math.random()*3)]   ') repeat',
        'background-position' : '100%',
    'background-size' : 'repeat'});}pic();</script>

Option #3

<style type="text/css">
#banner {
 height:100%;
 background:transparent url(https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif) repeat cover cover;
}
</style>
<script type="text/javascript"> 
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif"); 
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("  randomimage  ")"; 
}
</script>
</head>
<body >
<div id="banner"></div>
</body>