title: How to make div background image inside another div to responsive?
body: <p>I've been struggling with this issue for a while although tried from many topics in StackOverflow, and just wondered if anyone has any advice! </p>
  
  <p>I'm using Bootstrap 3, basically I want to place images inside the container <code>&lt;div&gt;</code>, that will resize with the browser window, the content still staying inside it. So how can I make it responsive? Thank you in advance!</p>
  
  <p><strong><a href="http://codepen.io/thehung1724/full/emZXQK" rel="nofollow">Demo</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="special-dishes-section"&gt;
      &lt;div class="container"&gt;
          &lt;div class="special-dishes"&gt;
          &lt;/div&gt;    &lt;!-- end special-dishes --&gt;
      &lt;/div&gt;    &lt;!-- end container --&gt;
  &lt;/div&gt;    &lt;!-- end special-dishes-section --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#special-dishes-section{
      background: url('../images/special-dishes-bg.jpg') no-repeat center center;
      min-height: 560px;
      padding: 71px 0 65px 0;
      position: relative;
  }
  
  .special-dishes{
      background: url('../images/wooden-bg.png') no-repeat center center;
      min-height: 424px;
  }
  </code></pre>