Scaling a div with background image to fit screen size
<p>Most of my pages has a full width banner at the top just under the menu. They are created as a div with a background image from an image sprite file to reduce page load time.
My problem is that the div does not resize when the screen gets smaller, it just cuts the div of. What I would like is that the div is always 100% wide and its height scaling to keep the proportions of the background image (1300px × 300px).</p>

<p>Here' the code and a jsfiddle:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="entry-content"&gt;
  &lt;div class="banner"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>



<pre><code>.entry-content {
    max-width: 1300px;
    width: 100%;
    padding: 0 20px 0 20px;
}
.banner {
    margin: 0 -20px 0 -20px;
    max-width: 1300px;
    height: 300px;
    background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
    background-position: 0 -900px;
}
</code></pre>

<p><a href="https://jsfiddle.net/fy2zh4vm/1/" rel="nofollow">https://jsfiddle.net/fy2zh4vm/1/</a></p>