Can anyone help me with adding a responsive background image between the header and footer of my website? I want to make sure the background image changes randomly on each page load from a set of 5 different images.
I've made some progress, but I'm stuck on implementing the changing background image feature.
<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">
<!-- PLACEHOLDER FOR BACKGROUND IMAGE -->
</div>
<div>
<p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #FAEDE8; letter-spacing: 1px; padding: 2px;">FREE SHIPPING 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>
I would greatly appreciate any assistance on this matter!