Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've been trying to get this same effect. I've found that html,body, and the div that holds your background image, needs a height of 100%. Best way I've found to do this. If anyone has a better way, please share. </p> <p>Fiddle : <a href="http://jsfiddle.net/b87pV/" rel="nofollow">http://jsfiddle.net/b87pV/</a></p> <h2>HTML</h2> <pre><code> &lt;body&gt; &lt;div class="first"&gt; &lt;div class="header"&gt; &lt;div class="logo"&gt;LOGO&lt;/div&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="second"&gt; &lt;div id="projects"&gt; &lt;h1&gt;Projects&lt;/h1&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nesciunt explicabo ipsam laudantium quaerat dolorem molestiae. Reprehenderit, perspiciatis, assumenda, repellat dolores dolore corporis doloribus voluptatem magni suscipit aperiam fugiat quia. &lt;/p&gt; &lt;/div&gt; </code></pre> <p> </p> <h2>CSS</h2> <pre><code> html,body { height: 100%; padding: 0; margin: 0; } .first { height: 100%; background-image: url(http://cs425729.vk.me/v425729136/4e67/6abwVXLTK9s.jpg); background-repeat: no-repeat; background-position: top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .header { background: #333; height: 60px; } .logo, a { color: white; } .logo { float: left; padding: 20px; } nav { float: right; padding: 5px } nav li{ display: inline-block; padding-right: 50px; } #projects { padding: 50px; } </code></pre> <p>I believe internet explorer trips up on background:cover. There are work arounds out there. Simple search away.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload