CSS background-image width 100% height auto : <p>I need some kind of an elegant solution for background-image width 100% height auto. It must be the same way as it behaves like as if you use image src. I will use the example of another question on stackoverflow as the answers there did not work for me, nor did they work correctly at all. </p>

<p>Note: I will be putting this in css grids which will have an auto width and the image itself will have a border. </p>

<p>If there is a js solution, as long as it works, i don't mind.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#image {
    background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="image"&gt;some content here&lt;/div&gt;</code></pre>
</div>
</div>
</p>
