title: Random background generator with Javascript and CSS
body: <p>I'm trying to make the background change randomly when coming to my site.</p>
  
  <p>I saved some images as 1.jpg, 2.jpg etc and I tried to do a bit of javascript random. Can any one suss why this would not work? I know you won't be able to see the photos, but any help would be great.</p>
  
  <p>Here is the jsbin - notice the background is selected in #topContainer in css</p>
  
  <p><a href="https://jsbin.com/qodukozuqi/edit?html,output" rel="nofollow">https://jsbin.com/qodukozuqi/edit?html,output</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
    function randomBackground () {
  
      var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
    }
    return randomPicture;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the full code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
  
      &lt;script type="text/javascript"&gt;
    WebFontConfig = {
      google: { families: [ 'Tenor+Sans::latin', 'Rock+Salt::latin' ] }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })(); &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
        function randomBackground () {
  
          var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
          return randomPicture;
  
        }
  
  
      &lt;/script&gt;
  
  
      &lt;title&gt;NaturallyPizza&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;link href='https://fonts.googleapis.com/css?family=Tenor+Sans|Rock+Salt' rel='stylesheet' type='text/css'/&gt;
  
  
      &lt;style&gt;
  
      .navbar-collapse{
        color: white;
      }
  
      .navbar-brand {
          font-size: 1.5em;
          font-family: 'Rock Salt', sans-serif;
          color: white;
      }
  
      .navbar-default {
        margin-top: 30px;
        background-color: transparent;
        border: hidden;
        font-family: 'Tenor Sans', sans-serif;
  
        }
  
  
        .listing  a{
          font-size: 1.5em;
          color: white;
        }
  
  
        #topContainer {
          background-image: url("images/background/"+randomPicture);
          height: 500px;
          width: 100%;
          opacity: 0.95;
          background-size: cover;
          color: white;
      }
  
      .navbar-default .navbar-brand {
          color: white;
        }
  
   @media (max-width: 760px) {
      .navbar-default {
          background-color: lightgrey;
          opacity: 0.95;
        }
      }
  
      #topRow {
  
      margin-top: 130px;
      font-family: 'Tenor Sans', sans-serif;
  
      }
  
      .center {
        text-align: center;
      }
  
      .title {
        font-size: 3em;
        color: white;
      }
      .backing {
  
        background-color: grey;
        opacity: 0.6;
        border-radius: 10px;
      }
  
      .marginTop {
  
        margin-top: 30px;
  
      }
  
      .jumbotron {
  
        background-image: url("images/background/1.jpg");
        background-size: cover;
      }
  
    &lt;/style&gt;
  
  
  
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;script type="text/javascript"&gt;alert(randomBackground);&lt;/script&gt;
  
         &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="navbar-header"&gt;
                  &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar color-me"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;  
                  &lt;/button&gt;
  
                  &lt;a class="navbar-brand"&gt;NaturallyPizza&lt;/a&gt;
  
              &lt;/div&gt; &lt;!-- class="navbar-header" --&gt;
  
              &lt;div class="collapse navbar-collapse navbar-right listing"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
  
                      &lt;li class="color-me"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt; &lt;!-- class="collapse navbar-collapse" --&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!--  class="navbar navbar-default" --&gt;
  
  
     &lt;div class="container-fluid contentContainer" id="topContainer"&gt;
  
          &lt;div class="row-fluid"&gt;
  
                &lt;div class="col-md-8 col-md-offset-2 backing" id="topRow"&gt;
  
                  &lt;h1 class="title marginTop center"&gt;Learn to make great Pizza!&lt;/h1&gt;
  
                &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
  
   &lt;/div&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(".contentContainer").css("min-height", $(window).height());        
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>