image of search icon not visible inside search box

Question

I am not able to figure out why the image of search icon does not appear inside the search box when using the image after downloading but appears when directly using the link.Any suggestions?The image is this: http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png

<div  class="bar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="logo">  
            <a href="main.php">XYZ</a>
        </div>
        <div  class="col-xs-5 right-inner-addon has-feedback">
               <form class="form-inline" role="form">
                 <div class="form-group has-feedback">
                 <label class="control-label" for="inputSuccess4"></label>
                 <input type="text" class="form-control" id="inputSuccess4" placeholder="Search">     
                 </div>
               </form>             
        </div>
    </div>   
</div>

.right-inner-addon {
    padding-top: 8px;
    padding-left:30px;

}
.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background-image: url('images/search.png');
    background-position: 370px -10px;
background-repeat: no-repeat;
}

.form-control{
    min-width: 400px; 
    max-width: 400px; 
    min-height: 29px;
    top: 7px;
    position: fixed;

}

Answer 1

Change the background-position property value to something like 365px 5px.

Updated Example - (Not sure where you want it positioned - but now it's visible at least)

.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background-image: url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png');
    background-position: 365px 5px;
    background-repeat: no-repeat;
}

Answer 2

You don't actually need to specify px in positioining. Check this fiddle.

CSS:

.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background: url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png') no-repeat right center;   
}

Answer 3

ok . you should put this in the line of the search icon .

background-image: url('../images/search.png');

please be attention to the directory you do that if your photo is in your local machine don't forget this ok (../ before your directory )

Answer 4

if your image is on line in this like you put this is your new code :

background: url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png') no-repeat right center;

but if you have a images file in your local pc you shpuld put this code :

background-image: url('../images/search.png');