title: How to change background image repeatedly
body: <p>I need to change the header banner background image repeatedly in my HTML static page. Right now, it's having only a single bg image. I need to add 2 more images which must change one by one after 4 or 5 secs and repeats the process just like a slider by keeping the content unchanged. Is there any easy method without using slider plugins. Below is my HTML code for the header? Thanks &amp; regards.</p>
  
  <pre><code>&lt;header id="home"&gt;
      &lt;!-- Background Image --&gt;
      &lt;div class="bg-img" ***style="background-image: url('images/images/p1.png');"***&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /Background Image --&gt;
  
      &lt;!-- Nav --&gt;
      &lt;nav id="nav" class="navbar nav-transparent"&gt;
          &lt;div class="container"&gt;
  
              &lt;div class="navbar-header"&gt;
                  &lt;!-- Logo --&gt;
                  &lt;div class="navbar-brand"&gt;
                      &lt;a href="home"&gt;
                          &lt;img class="logo" src="images/logo-png.png" alt="logo" style="width:55%;"&gt;
                          &lt;img class="logo-alt" src="images/logo-png.png" alt="logo"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- /Logo --&gt;
  
                  &lt;!-- Collapse nav button --&gt;
                  &lt;div class="nav-collapse"&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /Collapse nav button --&gt;
              &lt;/div&gt;
  
              &lt;!--  Main navigation  --&gt;
              &lt;ul class="main-nav nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="aboutus"&gt;About us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="what-we-do"&gt;What we do&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contactus"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- /Main navigation --&gt;
  
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- /Nav --&gt;
  
      &lt;!-- home wrapper --&gt;
      &lt;div class="home-wrapper"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
  
                  &lt;!-- home content --&gt;
                  &lt;div class="col-md-10 col-md-offset-1"&gt;
                      &lt;div class="home-content"&gt;
                          &lt;h2 class="white-text"&gt;uniforms @ competetive rates&lt;/h2&gt;
                          &lt;p class="white-text"&gt;We are always committed to give you best quality uniform at very competitive rates
                          &lt;/p&gt;
                          &lt;a href="aboutus"&gt;&lt;button class="white-btn"&gt;Read more&lt;/button&gt;&lt;/a&gt;
                          &lt;a href="gallery"&gt;&lt;button class="main-btn" style="background-color:#e29d0a"&gt;Gallery&lt;/button&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- /home content --&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /home wrapper --&gt;
  
  &lt;/header&gt;
  </code></pre>