Randomized Responsive Background Image between Header and Footer?

Question

I need to add a responsive background image between a header and footer of my site but I also need to have it so that the background image changes randomly on each page load (from a selection of 5 different images).

Any help on how to achieve this?

This is what I've got so far, minus the background image in between the header and footer.

<body>
  <header style="position: static;">
     <div class="wrapper">
        <div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
        <nav id="nav" role="navigation">
           <a href="#nav" title="Show navigation">Show navigation</a>
           <a href="#" title="Hide navigation">Hide navigation</a>
           <ul>
              <li><a href="home.html" aria-haspopup="true">HOME</a></li>
              <li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
              <li><a href="about.html" aria-haspopup="true">ABOUT</a>
              <li><a href="sizing.html">SIZING</a></li>
              <li><a href="video.html">VIDEO</a></li>
              <li><a href="press.html">PRESS</a></li>
              <li><a href="social.html">SOCIAL</a></li>
              <li><a href="contact.html">CONTACT</a></li>
           </ul>
        </nav>
     </div>
  </header>
  <div class="hero">
     <!-- BACKGROUND IMAGE HERE -->
  </div>
  <div>
     <p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #FAEDE8; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
  </div>
  <footer>
     <div class="foot-wrap">
        <div class="foot-list-left">
           <ul>
              <li><a href="privacy.html">PRIVACY POLICY</a></li>
              <li><a href="terms.html">TERMS OF USE</a></li>
              <li><a href="customer.html">CUSTOMER SERVICE</a></li>
              <li><a href="orders.html">ORDERS</a></li>
              <li><a href="returns.html">RETURN POLICY</a></li>
           </ul>
        </div>
        <div class="foot-list-right">
           <ul>
              <li>© 2015 SUMMERHEART</li>
           </ul>
        </div>
     </div>
  </footer>
</body>

Any help would be majorly appreciated!

http://stackoverflow.com/questions/28688925/random-background-image-with-corresponding-attribution-link http://stackoverflow.com/questions/8827691/random-body-background-image http://stackoverflow.com/questions/30854827/javascript-changing-random-background-image-issue - dupe question: https://www.google.co.uk/search?q=random+background+image+javascript+stack+overflow — Nick R, Sep 24 '15 at 15:32

Eric Schmidt · Answer 1 · 2015-09-24T19:29:13.047

I would create a Javascript array containing each of the possible images, and then use Math.random (with Math.round to round to a whole number) to select one of them on each page load. Example using jQuery to append image to the 'hero' element:

var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'];
var randomNumber = Math.round(Math.random() * (images.length - 1));

$('.hero').append('<img src="' + images[randomNumber] + '">');

The Math.random method creates a random number (between 0 and 5 in this case, but it will scale based on the size of the image array). This is then used to access an entry in the array randomly on each page load. It then appends this randomly selected image.

Randomized Responsive Background Image between Header and Footer?

1 Answers1