Unable to display a background image
<p>I am trying to set multiple background images for my page but I am unable to do so using an external CSS file and I don't know if I am doing something wrong or there is something wrong with Notepad++ or XAMPP because my code seems to be functional.</p>

<p>NOTE:</p>

<ul>
<li>The images I am using has all the permissions turned on.</li>
<li>I am able to see the image if I use in-line CSS but not when I use an
external CSS file.</li>
<li>I am also able to see the image when i use the image tag.</li>
</ul>

<p>Image Tag (this Works)</p>

<pre><code>&lt;img src="img/bg1.png" alt=""&gt;
</code></pre>

<p>Test HTML Document</p>

<pre><code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
        &lt;head&gt;
            &lt;meta charset="utf-8"&gt;
            &lt;title&gt;Test&lt;/title&gt;

            &lt;!-- Custom Cascading Styling Sheet --&gt;
            &lt;link rel="stylesheet" type="text/css" href="css/custom-styles.css"&gt;

        &lt;/head&gt;
        &lt;body&gt;

        &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>External CSS Code: custom-styles.css</p>

<p>Example 1 (this doesn't work):</p>

<pre><code>    body {
        background-image: url('img/bg1.png'), url('img/bg2.png'), url('img/bg3.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
    }
</code></pre>

<p>Example 2 (this doesn't work):</p>

<pre><code>    body {
        background-image: url('img/bg1.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
    }
</code></pre>

<p>Example 3 (this doesn't work):</p>

<pre><code>body {
    background-image: url('img/bg1.png');
}
</code></pre>