title: How to scale a background image in a div responsively to the screen size
body: <p>I'd like to add a background-image to my website inside a div that should resizes perfectly on all devices. I tried the simplest way like "height: 100%" but that didn't work at all. I also tried media-queries which of course works but is rather complicated so I wanted to ask if there is an easier way to solve this.</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div class="bg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And that's the CSS</p>
  
  <pre><code>.bg {
      background: url('bg.jpg') no-repeat center cover;
  }
  </code></pre>