Custom checkbox only works with background color, not image

I wanted to use custom checkboxes on a website so for starters, I worked with a span that I gave a custom background-color and once checked, I changed the background-color in CSS and this worked fine, the background-color changed when the checkbox was clicked on. However, once I replaced the color values by an image background url, it shows the background image in the initial state but it won't change the background-image after the value is checked. The checkbox flashes for a brief time but then continues to have the original background image.

The URL is correct, I can open the image in my browser. I've tried by giving the label rather than the span inside it the background properties but this has the same result. In the inspector in Google Chrome, the new background property is also 'active' (and the old one 'crossed out') so I just can't understand why it continues to show the old one.

The HTML:

<input type="checkbox" id="unlimited" name="unlimited" value="unlimited" />
<label for="unlimited"><span></span>Unlimited amount</label>

CSS:

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

.input[type="checkbox"] + label span {
display:inline-block;
width:30px;
height:30px;
margin:-1px 4px 0 0;
vertical-align:middle;
background: url("../../static/img/checkbox1.jpg");
cursor:pointer; 
}


input[type="checkbox"]:checked + label span {
background: url("../../static/img/checkbox2.jpg");
}