add image in textbox css

Question

I'm trying to add image to my text box

here is the code

<form id="findPromo">
    <input type="text" name="find" placeholder="I'm Looking For...">
    <input type="button" value="Search">
</form>

css

#findPromo input[type="text"] {
    background: url(image/find.png) no-repeat 10px 6px #444;
    background: #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#findPromo input[type="text"]:focus {
    background: url(image/find.png) no-repeat 10px 6px #444;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

but the image does not come out

anyone know how to do it?

thanks

Answer 1

In the first CSS ruleset, you first set the background to your image but then overwrite it with the background: #444 rule. You don’t just overwrite the background color, but the whole background statement.

Since you already have the #444 in the first statement, you can safely remove the second one.

Answer 2

It is because you are overriding the background prorepty with background: #444; if you remove that line, the image is displayed :

DEMO