title: Responsive Bootstrap Jumbotron Background Image
body: <p>I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.</p>
  
  <pre><code>&lt;div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;"&gt;
     &lt;div class="container for-about"&gt;
     &lt;h1&gt;About&lt;/h1&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would you go about making the image responsive? <a href="http://californiafootgolfclub.com/dev/about/">The site is HERE</a>. Thanks for your ideas!</p>