checkbox not displaying as an image

I am trying to have an icon as a checkbox that is going to show up in my mobile view where you can click show and hide the menu, right everything works with clicking and hiding the menu my problem is trying to figure out how to display the current checkbox as an image not sure what I am doing wrong, could someone point me to the right direction please ? Thanks in advance id like to display something like this for my checkbox #menu-icon { display:inline-block; width: 40px; height: 40px; background: url(menu-icon.png) center; } jsfiddle http://jsfiddle.net/g825b/ my code <input id="menu-icon" type="checkbox"> <nav class="navMenu"> <label class="iconMenuLbl" for="menu-icon"></label> <ul> <li> <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a> </li> <li> <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a> </li> <li> <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a> </li> <li id="loggedin-box" class=""> <form method="POST" action="login"> <div> <strong>some name</strong> </div> <button style="padding:0px;" name="logout" type="submit"> <img class="navImg" src="media/Sign-Out.png"> </button> </form> </li> </ul> </nav> js $(function() { var menuVisible = false; $('#menu-icon').click(function() { if (menuVisible) { $('.navMenu').css({'display':'none'}); menuVisible = false; return; } $('.navMenu').css({'display':'block'}); menuVisible = true; }); $('.navMenu').click(function() { $(this).css({'display':'none'}); menuVisible = false; }); });