background image with 100% width
<p>As we all know, we can create a responsive image with 100% of parent width and height according to ratio with following code. However, I would like to achieve the same effect by treating it as background image using <code>background-image CSS</code>.</p>

<p>It seems that I am unable to find any solution to it.</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-html lang-html prettyprint-override"><code>&lt;div style="margin: 0 20px;"&gt;
 &lt;div style="width: 100%"&gt;
     &lt;img style="width: 100%" src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg"&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>It seems that a lot have given answer about <code>background: contain</code> and <code>background: cover</code> and it does not work. I have provided a code snippet as follow for better clarification. </p>

<p>Rules: <br>
1) Height of div should not be specified. <br>
2) <code>background</code> CSS should be used (and this is why I call it as background image).<br>
3) Background image height should auto scale according to the width.</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>.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg') no-repeat;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="margin: 0 20px;"&gt;
     &lt;div class="bg-image"&gt;
 
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>