How to display image in place of checkbox?

Question

I want to display green checked image when checkbox is checked and when not checked empty box. I tried to put checkbox in div and set div's background but it is not helping me out. Any idea what to do? Below is the output I want.

Answer 1

Here is an example, done with a little jQuery and CSS: DEMO

$(".checkbox").click(function() {
  $(this).toggleClass('checked')
});

.checkbox {
  width: 23px;
  height: 21px;
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}

.checked {
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="checkbox">
</div>