Positioning a background image on a form element using CSS sprites

Question

I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of the CSS sprite, which looks like this:

To position it, I used these properties:

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

But the background still appears at the top of the input window, rather than being aligned in the vertical middle and left. I also tried:

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

but it doesn’t work either.

If that matters, although I assume this does not happen, here is my form markup:

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

Thanks for any help.

Answer 1

You declared background-position twice. The first is at the end of the background short-hand property, the second is on the next line. Solution : split all single background rules like this (optionally, 0 -24px is the correct value):

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

And now you may run into a real problem with your design: other sprites will be visible in the input area if there is not enough space between them.