How to make a background image responsive
<p>I just created a simple coming soon page with a background-image using css:</p>

<pre><code>body{
   background-image: url(FreeVector-Fresh-Beer.jpg);
   background-repeat: no-repeat;
   background-size: cover;  
}
</code></pre>

<p>Here the html:</p>

<pre><code>&lt;figure&gt;
        &lt;img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"&gt;
&lt;/figure&gt;
&lt;div class="paragraph" style="font-size:50px"&gt;
    &lt;p&gt;Our Website Is Brewing ! ! ! &lt;/p&gt;
    &lt;p&gt;Coming To A Browser Near You. . .&lt;br&gt;&lt;a href=""&gt;info@craftbeersa.co.uk&lt;/a&gt;&lt;/p&gt;           
&lt;/div&gt;      
</code></pre>

<p>How can I make this background image responsive?</p>