Я пытаюсь получить увеличительное стекло в качестве фона для моего элемента ввода. Значок увеличительного стекла является частью CSS-спрайта, который выглядит следующим образом:

Чтобы расположить его, я использовал эти свойства:

#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;
}

Но фон по-прежнему отображается в верхней части поля ввода, а не выравнивается по вертикали в середине и влево. Я также попытался сделать:

background: url('../images/icons.png') no-repeat left middle;

но это тоже не работает.

Если это имеет значение, хотя я предполагаю, что это не так, вот моя разметка формы:

<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>

Спасибо за любую помощь.