how to change jquery ui input textbox background image

Question

I have a custom image for a text field . I am using jquery mobile input textbox . I want to apply my custom image as background to the input text box. Please guide me how can I do this.

Answer 1

Just apply the image to the background in CSS:

<form>
    <label for="text-1">Text input:</label>
    <input type="text" name="text-1" id="text-1" value="hello world!" />
</form>

#text-1 {
    background-image: url("http://lorempixel.com/1000/40/abstract/1/") !important;
    color: white;
    text-shadow: 0 1p 0 #333;
}

DEMO

UPDATE: OP wants background on slider handle too:

Add a container around the slider to make the CSS selector easier:

<div id="sliderContainer">
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />            
</div>

Apply the background to the div with class of .ui-slider-handle inside the container:

#sliderContainer .ui-slider-handle {
       background-image: url("http://lorempixel.com/80/80/abstract/3/") !important; 
}

Updated DEMO