Using a background-image for checkbox

You can just do it with label

   input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 0 0 0 0px;
    background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
    height: 125px;
    width: 125px;;
    background-size: 50%;
}

input[type=checkbox]:checked + label {
    background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
    height: 125px;
    width: 125px;
    display:inline-block;
    background-size: 50%;
}

Html

<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>

Please check updated jsfiddle https://jsfiddle.net/s4nr6q3d/

You shouldn't actually try and change the checkbox directly; some browsers will always show the default checkbox. How it is typically done is by adding a label for the checkbox that is linked to the inputs id field. For example:

<input type='checkbox' id='x' name='fordCheckBox'>
<label for='x'></label>

Then you set your checkbox to display: none and the actual css gets applied to the label instead. Your selectors should look like this: input[type=checkbox]:checked + label

I found this article that will help explain everything and walk you through it step by step:

http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

I used this CSS. In this CSS, when checkbox is checked, it puts a tick image on the checkbox. Also it changes the size, color and border of the checkbox by default.

    input[type='checkbox'] {
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        background: white;
        border-radius: 5px;
        border: 2px solid #555;
        vertical-align:middle;
    }

    input[type='checkbox']:checked {
        background-image: url("Images/tick-sm.png");
        background-size: 90%;
        background-position: right center;
        background-repeat: no-repeat;
   }

Replace "Images/tick-sm.png" with your own image.

If you want a different background for the un-checked state too, add the same contents of the second block to first block and replace the image.