Позиционирование фонового изображения на элементе формы с CSS спрайтами

Question

Я пытаюсь получить увеличительное стекло в качестве фона для моего элемента ввода. Значок увеличительного стекла является частью 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> 

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

Answer 1

Вы объявили background-position два раза. Первый в конце background короткой собственности, второй на следующей строке. Решения: Разделить все одиночные background правил, как это (дополнительно, 0 -24px правильного значения):

#search-form input[type="text"] { 
    background-image: url('http://i.stack.imgur.com/MFpLm.png'); 
    background-repeat: no-repeat; 
    background-position: 0 -24px; 
    border: 1px solid #a9e2ff; 
    padding: 3px; 
    width: 200px; 
    font-size: 1em; 
    padding-left: 20px; 
} 

И теперь вы можете столкнуться с реальной проблемой с вашим дизайном: другие спрайты будут видны на входе если между ними нет достаточного пространства.