alternating background images

rowers/templates/basefront.html

@@ -31,7 +31,6 @@
     <style>
       .splash {
       background-color: transparent;
-      background-image: url("/static/img/landing1.jpg");
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
@@ -45,7 +44,7 @@
       .container_top {background-color: rgba(255,255,255,0.7);}
     </style>
     
-    <div class="splash">
+    <div id="bgpic" class="splash one">
     {% analytical_body_top %}
     <div class="container_top">
     <div class="container_12">
@@ -257,5 +256,16 @@
     </div>
     <!-- end container -->
     {% analytical_body_bottom %}
+    <script type="text/javascript">
+      var num = (Math.floor(Math.random()*4));
+
+      var array = ['one', 'two', 'three', 'four'];
+
+
+      var elem = document.getElementById('bgpic');
+      console.log(elem);
+      elem.classList.add(array[num]);
+
+    </script>
   </body>
 </html>