jquery - Checkbox as image - Background Color -

i have followed link image checkboxes

http://jsfiddle.net/jtbowden/xp2ns/. scripts , css worked perfectly.

.checkbox, .radio {     width: 19px;     height: 20px;     padding: 0px;     background: url("http://i48.tinypic.com/raz13m.jpg");     display: block;     clear: left;     float: left;  } 

my issue trying set background-color if user clicks checkbox:

.green {     background-color: green;  } 

and background-color not looking expected , looking same fiddle o/p.

how can fix or miss ?

in html give

<p>     <input type="checkbox" name="1" class="styled green" />(green) <p> 

but still applying entire span. not sure doing wrong !

you can use class know background color (eg green), in docheck function can check class , add new class containing background (eg greenchecked).

you can use same approach other colors.

example:

.greencheck {     background-color: green; }  function docheck() {     if ($(this).hasclass('checked')) {         $(this).removeclass('checked');         if($(this).hasclass('green')){             $(this).removeclass('greencheck');         }         $(this).children().prop("checked", false);     } else {         $(this).addclass('checked');         if($(this).hasclass('green')){             $(this).addclass('greencheck');         }         $(this).children().prop("checked", true);     } 

here working fiddle: http://jsfiddle.net/xp2ns/1241/