Positioning background image on form element with 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 a CSS sprite that looks like this:

enter image description here

To position it, I've 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 box rather than aligned in the vertical middle and to the left. I've also tried doing:

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

but that doesn't work either.

If it matters, although I'm guessing it doesn't, here's my form markup:

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

Thanks for any help.

lorenzo-s · Accepted Answer · 2012-01-27 20:56:54Z

7

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

#search-form input[type="text"] {
    background-image: url('https://i.sstatic.net/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 can face the real problem with your design: other sprites will be visible in the input area if there are no sufficient space between them.

answered Jan 27, 2012 at 20:56

lorenzo-s

17.1k15 gold badges59 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Dawson Over a year ago

Thanks! I thought there would be a way to do this without adding extra space between my sprites, but apparently not. :)

lorenzo-s Over a year ago

@MartinHoe Usually you just need to wrap the sprite in a box that is exactly big as the icon size. Unfortunaly you cannot do this, because you can't have block elements inside an input box.

Collectives™ on Stack Overflow

Positioning background image on form element with CSS sprites

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related