How to add an image to the back of a custom checkbox

I found a really clean looking custom checkbox on codepen and just updated a project to use it. Right now I've got the background colors different for the different sections of my form, but I'd like to just make background an icon rather than just a solid color

The commented out stuff doesn't work

 <style>
.label-switch{
    display: inline-block;
    position: relative;
 }

.label-switch::before, .label-switch::after{
     content: "";
     display: inline-block;
     cursor: pointer;
     transition: all 0.5s;
}

.label-switch::before {
     width: 3em;
height: 1em;
border: 1px solid #757575;
border-radius: 4em;
background: #888888;
}

.label-switch::after {
     position: absolute;
    left: 0;
    top: -20%;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #757575;
    border-radius: 4em;
    background: #ffffff;
}

.input-switch:checked ~ .label-switch::before {
    background: #00a900;
    border-color: #008e00;
}

.input-switch:checked ~ .label-switch::after {
    left: unset;
    right: 0;
    background: #00ce00;
/*background-image:(url(http://pngimg.com/uploads/pokeball/pokeball_PNG8.png);*/
/*background: url(http://pngimg.com/uploads/pokeball/pokeball_PNG8.png);*/
    border-color: #009a00;
}
<style>


<input class='input-switch' type="checkbox" id="demo"/>
<label class="label-switch" for="demo"></label>
<span class="info-text"></span>