 <p>the issue is with the z-index of the div containing the image and the div containing the footer.</p> <p>the easiest solution is to put the footer after the div with your content. The only time z-index should come into play is if you are trying to put items on top of the image for effect.</p> <pre><code>&lt;div id="content-wrapper"&gt; &lt;div id="nav"&gt; &lt;span&gt;NAV&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;span&gt;FOOTER&lt;/span&gt; &lt;/div&gt; </code></pre> <p>you can easily add the footer in the container, attach at the bottom as well. see if this example helps: <a href="https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview" rel="nofollow">https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview</a></p>