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 short-hand 속성의 끝에있는 첫 번째 것, 두 번째 줄은 다음 줄에 있습니다. 솔루션 : 가 (추가로, 0 -24px 올바른 값)이 같은 모든 단일 background 규칙을 분할 :

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

그리고 지금 당신은 당신의 디자인 진짜 문제에 직면 할 수 있습니다 다른 스프라이트 입력에 표시됩니다 영역 사이에 충분한 공간이없는 경우 영역.