//load random image on page load

by freedawirl

HTML

<link rel="stylesheet" href="https://capmetro.org/gage/vendor/bootstrap/css/bootstrap.css">
<script src="https://capmetro.org/gage/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://capmetro.org/gage/vendor/jquery/jquery.min.js"></script>
<div class="container">
<div class="row">

<div class="jumbtron" id="randomImage"></div>
</div>
</div>

CSS

*{height:100%; width:100%;padding:0px;margin:0px;}

JavaScript

//load random image on page load
// via -  http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery
https://capmetro.org/uploadedImages/New2016/Public_Involvement/Community_Involvement/12th_and_Chicon/cmta-ci-12-chicon-05.jpg
//http://bukk.it/
var fleximg = $('#randomImage');
var images = ['cmta-ci-12-chicon-05.jpg', 'cmta-ci-12-chicon-06.jpg', 'cmta-ci-12-chicon-011.jpg', 'cmta-ci-12-chicon-15.jpg', 'cmta-ci-12-chicon-19.jpg'];

$('#randomImage').css({'background-image': 'url(https://capmetro.org/uploadedImages/New2016/Public_Involvement/Community_Involvement/12th_and_Chicon/' + images[Math.floor(Math.random() * images.length)] + ')'});

$(function(){
fleximg.find('#randomImage img').addClass('img-responsive');
});