 <p>Your code works fine unless you make sure that your parent element has a height greater than zero - otherwise your <code>.main</code> element will have no height either.</p> <p>Also make sure that the file path to your image is correct. You can use the developer tools of your browser to check the height of your container and the image url.</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>html, body { width: 100%; height: 100%; } .main { min-height: 100%; width: 100%; position: relative; background-image: url(//placehold.it/500); background-repeat: no-repeat; background-size: cover; display: block; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;&lt;/div&gt;</code></pre> </div> </div> </p>