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

Question

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
.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;
}
<input class='input-switch' type="checkbox" id="demo" />
<label class="label-switch" for="demo"></label>
<span class="info-text"></span>

Answer 1

Everything you did was correct it's just the background image needed to have a background-position and background-size set if you toggle the checkbox in my snippet you should see the background pattern as you intended it to work.
.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-size:contain;
background-position:center;
border-color: #009a00;
}
<input class='input-switch' type="checkbox" id="demo"/>
<label class="label-switch" for="demo"></label>
<span class="info-text"></span>