how to change jquery ui input textbox background image -

i have custom image text field . using jquery mobile input textbox . want apply custom image background input text box. please guide me how can this.

just apply image 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 container around slider make 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 background div class of .ui-slider-handle inside container:

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

updated demo