Merge branch 'feature/multiplebg' into develop

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">
     {% 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>

static/css/rowsandall.css

@@ -1,4 +1,30 @@
+#main {
+    background-color: transparent;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    min-height: 759px;
+    min-width: 1024px;
+    width: 100%;
+    height: auto;
+}
 
+.one {
+    background-image: url("/static/img/landing1.jpg");
+}
+
+.two {
+    background-image: url("/static/img/landing1.jpg");
+}
+
+.three {
+    background-image: url("/static/img/landing1.jpg");
+}
+
+.four {
+    background-image: url("/static/img/landing1.jpg");
+}
 
 html { 
   font-size: 62.5%;

static/js/background.js

@@ -0,0 +1,8 @@
+      var num = (Math.floor(Math.random()*4));
+
+
+      var array = ['one', 'two', 'three', 'four'];
+
+      var elem = document.getElementById('main');
+
+      elem.classList.add(array[num]);