title: Trying to make a basic parallax website with css
body: <p>So here's my HTML</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
   &lt;head&gt;
     &lt;div class=&quot;topbar&quot;&gt;&lt;/div&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;new.css&quot;&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class=&quot;pic1&quot;&gt;&lt;/div&gt;
    &lt;header class=&quot;headings&quot;&gt;
      &lt;h1 align=&quot;center&quot;&gt;Header&lt;/h1&gt;
      &lt;h3 align=&quot;center&quot;&gt;smaller header&lt;/h3&gt;
    &lt;/header&gt;
    &lt;form class=&quot;form&quot;&gt;
      &lt;h1&gt;Login&lt;/h1&gt;
      &lt;input type=&quot;text&quot; name=&quot;Username&quot; placeholder=&quot;Username&quot; autofocus/&gt;&lt;/br&gt;
      &lt;input type=&quot;password&quot; name=&quot;Password&quot; placeholder=&quot;Password&quot;&gt;&lt;/br&gt;
      &lt;input type=&quot;submit&quot; name=&quot;&quot; value=&quot;submit&quot;&gt;
    &lt;/form&gt;
    &lt;div class=&quot;bottombar&quot;&gt;
      &lt;h1 align=&quot;center&quot;&gt;&lt;ins&gt;About Us&lt;/ins&gt;&lt;/h1&gt;
      &lt;p&gt;blah blah blah&lt;/br&gt;blah blah blah&lt;/br&gt;blah blah blah&lt;/br&gt;&lt;/p&gt;
    &lt;/div&gt;
     &lt;div class=&quot;pic2&quot;&gt;&lt;p&gt;Text 1&lt;/p&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and here's my CSS for the background images</p>
  <pre><code>.pic1{
    z-index: 1;
    background-image: url(&quot;fog.jpg&quot;);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0vw, 0vh;
    padding-top: 50vh;
    padding-bottom: 50vh;
  
  }
  .pic2{
    z-index: 1;
    background-image: url(&quot;butterfly.jpg&quot;);
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 115vh;
    padding-top: 45vh;
    padding-bottom: 35vh;
  
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Heebn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Heebn.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/a662d.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a662d.jpg" alt="enter image description here" /></a></p>
  <p>Hopefully you can see, but thebackground pics dont take up the whole screen, and there's a thin white border around them on the sides. The top bar and About Us bar span the whole page from the left to the right, but not the background pics.</p>