title: how to create two sections, one with an full screen image an another with the rest of the page
body: <p>I am trying to create a page with two sections.
  The first section will populate the entire screen with an image as a background, and the second, that the user can either scroll to or click a button to be scrolled to, has the text
  something like the following image (that shows the two pages one after the other)<img src="https://i.stack.imgur.com/qVRPt.png" alt="">
  or like the <a href="https://www.dropbox.com/" rel="nofollow noreferrer">dropbox website</a></p>
  
  <p>my current code is, but this does not work </p>
  
  <pre><code>  &lt;section  Style="margin-top:0px;
      text-align: center;
      background-color: #000008;
      background-image: url(/assets/highway4.png);
      background-position: center;
      background-repeat: no-repeat;
      -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
      -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 3px 3px rgba(0,0,0,.5);
    height: 1000px;
    width: 1500px"&gt;&lt;/section&gt;
  &lt;section&gt;
  the login form code
  &lt;/section&gt;
  </code></pre>
  
  <p>I also read this <a href="http://www.minimit.com/articles/code-tips/perfect-responsive-fullscreen-backgrounds" rel="nofollow noreferrer">post</a> but it did not work.
  By did not work I mean: that at the moment I am forcing height and width with pixels, this won't look the same on all computer screens. So I am trying to make it scale the section to take a full screen for every screen size </p>