title: How can I place an image inside an input?
body: <p>So I am trying to make an input field which is a search bar and I want to place a search icon on the left of the input field. I tried making this with setting the background-image property of the input field but it didn't work for me.
  I've already read some other questions like this on Stackoverflow but these solutions didn't work for me.
  I tried setting the display property of the input field as well but that didn't solve the problem for me.</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style/reset.css"&gt;
          &lt;link rel="stylesheet" href="style/style.css"&gt;
          &lt;title&gt;Google&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div&gt;
                  &lt;a href="https://mail.google.com/"&gt;Gmail&lt;/a&gt;
                  &lt;a href="https://www.google.hu/imghp?"&gt;Képek&lt;/a&gt;
                  &lt;a href="https://www.google.hu/intl/hu/about/products?tab=ih"&gt;&lt;img src="images/squares.png" alt=""&gt;&lt;/a&gt;
                  &lt;a href="https://www.google.hu/intl/hu/about/products?tab=ih"&gt;&lt;img class="profile" src="images/profile.png" alt=""&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="body"&gt;
              &lt;a href=""&gt;&lt;img src="images/google.gif" alt=""&gt;&lt;/a&gt;
              &lt;div id="sbcontainer"&gt;
                  &lt;div id="searchbar"&gt;
                      &lt;input type="text"&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  body {
      font-family: arial, sans-serif;
  }
  #header {
      text-align: right;
      margin: 15px 15px;
      padding: 0 15px 0 15px;
      word-spacing: 10px;
  
  }
  .profile {
      border-radius: 50%;
  }
  a {
      display: inline;
      color: rgba(0,0,0,0.87);
      text-decoration: none;
      font-size: 13px;
      line-height: 24px;
  }
  a:hover {
      text-decoration: underline;
  }
  #body {
      padding-top: 47px;
      text-align: center;
  }
  #searchbar {
      padding-top: 20px;
  }
  input {
      background: url(images/searchicon.png) no-repeat left center;
      line-height: 34px;
      padding-left: 30px;
      border: 1px solid rgb(216, 216, 216);
      padding-top: 5px;
      padding-bottom: 5px;
      width: 30%;
      border-radius: 40px;
  }
  </code></pre>