I've got code to randomize an image on refresh in javascript and CSS to format the image but I don't know how to combine the two

Question

I'm sorry if the title doesn't make sense, I'm extremely new to this, so here's a jsfiddle of what I'm talking about: https://jsfiddle.net/a3668a1f/1/

I want the images that show up below the title box to appear in the title box.

I just threw those images in there as an example.

 var images = [ "https://i.redd.it/1ev9elr85xcz.jpg", "https://i.redd.it/g6kc3upsvqdz.jpg", "https://i.redd.it/koucki3aygdz.jpg" ]; function randImg() { var size = images.length var x = Math.floor(size * Math.random()) document.getElementById('image').src = images[x]; } randImg(); 

 h1 { color: silver; text-align: center; max-width: 100%; vertical-align: middle; line-height: 85px; height: 100px; border: solid; border-color: silver; border-radius: 25px; border-width: 5px; background-position: center; background-repeat: no-repeat; background-image: url(https://i.redd.it/pvqzvajftpdz.jpg); background-size: cover; box-sizing: border-box; } 

 <div> <h1> Title. <img id="image" /> </h1> </div> 

Answer 1

Do you mean this?

 var images = [ "https://i.redd.it/1ev9elr85xcz.jpg", "https://i.redd.it/g6kc3upsvqdz.jpg", "https://i.redd.it/koucki3aygdz.jpg" ]; function randImg() { var size = images.length var x = Math.floor(size * Math.random()) document.querySelector('h1').style.backgroundImage='url('+images[x]+')'; } randImg(); 

 h1 { color: silver; text-align: center; max-width: 100%; vertical-align: middle; line-height: 85px; height: 100px; border: solid; border-color: silver; border-radius: 25px; border-width: 5px; background-position: center; background-repeat: no-repeat; background-image: url(https://i.redd.it/pvqzvajftpdz.jpg); background-size: cover; box-sizing: border-box; } 

 <div> <h1> Title. <img id="image" /> </h1> </div>