Setting a responsive background image to a div in HTML
<p>How do I make this background image visible and responsive? (Note: I know I should use a CSS seperately, but the Content Management System I use won't let me add seperate CSS files..)</p>

<p>If is set up the code like this, the image is not displayed:</p>

<pre><code>&lt;div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover;"&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And like this, the image is displayed, but not responsive:</p>

<pre><code>&lt;div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover; height:150px;"&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;div style="float:left; width: 32%; height:100%; display: inline-block;"&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Many thanks!</p>