title: HTML | Moving an image
body: <p>Im trying to make place the down arrow image to near the bottom of the sky background. I also want it to stay in the position when the window is resized.( I want it to be a splash screen with an arrow at the bottom that when clicked moves down to the next section)</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;particles.js demo&lt;/title&gt;
  &lt;link href="css/style.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="particles-js" width='100%'&gt;&lt;/div&gt;
  &lt;script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="js/index.js"&gt;
  &lt;/script&gt;
  &lt;img id='downarrow' height="75" width="75" src='images/arrowdown.png'&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>body {
  margin: 0;
  height: 2000px;
  width: 100%;
  }
  ::-webkit-scrollbar {
  display: none;
  }
  #particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00a4ff;
  background-image: url("http://i.imgur.com/yHL4C4u.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  
  #downarrow {
  margin-left: 50%;
  transform: translateX(-50%);
  }
  img {
  position: absolute;
  }
  </code></pre>