title: Displaying an image as a background of a html form using CSS
body: <p>I have two symbols currently in my sign in form and have tried adding a third which I have downloaded from Google as compared to the other two which came with a framework I had been using. </p>
  
  <p>When I try to add the one from Google, nothing appears in the input box.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;input type="email" value="" placeholder="Enter Your Email" id="email" name="email" /&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.login-block input#email {
  background: #fff url('../img/email.png') 3%  no-repeat;
  background-size: 6% 130%;
  line-height:300%;
  max-width:80%;
  padding-right:0%;
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/X2K1z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X2K1z.png" alt="Sign Up Form"></a></p>
  
  <p>The CSS is the same that works with the other two images, I've tried changing the background size, padding etc. but still no image appears. </p>
  
  <p>Can anyone help?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Why will this work with links from internet images but not with paths to images in my folder directorys?</p>
  
  <p>P.S. I know there is an issue with the Password placeholder.</p>