title: Positioning background image on form element with CSS sprites
body: <p>I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MFpLm.png" alt="enter image description here"></p>
  
  <p>To position it, I've used these properties:</p>
  
  <pre><code>#search-form input[type="text"] {
      background: url('../images/icons.png') no-repeat left center;
      background-position: 0px -30px;
      border: 1px solid #a9e2ff;
      padding: 3px;
      width: 200px;
      font-size: 1em;
      padding-left: 20px;
  }
  </code></pre>
  
  <p>But the background still appears at the top of the input box rather than aligned in the vertical middle and to the left. I've also tried doing:</p>
  
  <p><code>background: url('../images/icons.png') no-repeat left middle;</code></p>
  
  <p>but that doesn't work either.</p>
  
  <p>If it matters, although I'm guessing it doesn't, here's my form markup:</p>
  
  <pre><code>&lt;form action="/search" method="get" id="search-form"&gt;
      &lt;input type="text" placeholder="Search..." name="s"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Thanks for any help.</p>