title: Cycle through background image of bootstrap 3 jumbotron
body: <p>I'm trying to get 3 images to cycle through as backgrounds for a Bootstrap 3 jumbotron. But the problem is that I have 3 divs within the jumbotron and all the solution i've tried so far requires me to change the position of the jumbotron to relative and the background images to absolute. And because I'm trying to keep the site responsive, doing so severely messes up the look at smaller scales.</p>
  
  <p>I've also tried placing the jumbotron over a carousel by making the jumbotron absolute and carousel relative. The same scaling problem happens again at smaller screen sizes.</p>
  
  <p>Is there an easy way to do this?</p>
  
  <p>EDIT: I want my background to change similar to this site: <a href="http://www.in-toronto-web-design.ca/" rel="nofollow">http://www.in-toronto-web-design.ca/</a> and have it scale properly as well.</p>
  
  <p>my code:</p>
  
  <pre><code> &lt;!--begin jumbotron-top--&gt;
  &lt;div class="jumbotron" id="jumbotron-top"&gt;
      &lt;!--navigation bar--&gt;
      &lt;div class="row"&gt;
          &lt;nav class="navbar navbar-default transparent" id="navbar-main"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
                  &lt;span class="fa fa-chevron-down fa-2x"&gt;&lt;/span&gt; &lt;b&gt;Menu&lt;/b&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse" id="navCollapse"&gt;
                  &lt;ul class="nav nav-stacked main-nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Company&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;hr&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;!--end nav bar--&gt;
  
      &lt;h1&gt;Heading&lt;/h1&gt;
      &lt;div class="container"&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;a class="btn btn-lg btn-success fp-buttons" href="#"&gt;
              &lt;span class="fa fa-dollar fa-2x"&gt;&lt;/span&gt;Button1
          &lt;/a&gt;
  
          &lt;a class="btn btn-lg btn-success fp-buttons" href="#"&gt;
              &lt;span class="fa fa-check fa-2x"&gt;&lt;/span&gt;Button2
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--end jumbotron-top--&gt;
  </code></pre>