image not displaying for checkbox (css) - html

Question

I'm trying to use images as checkboxes in a grid layout, but the images won't show and I'm at a loss. Here is the relevant css and html. I have double checked the image address as this has been an issue in many other posts here, but it is stored at the address being accessed.
Any help is appreciated.
body{
width: 100vw;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.container {
width: 100%;
height: 100%;
margin: 0;
}
.jumbotron {
width: 100%;
float: left;
}
.four {
width: 32vw;
float: left;
margin-left: 2%;
/*background-color: #95a5a6;*/
}
.row {
width: 100vw;
height: 20vh;
clear: both;
padding: 0px;
margin: 0px;
}
.buttonLabel {
cursor: pointer;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"] + label {
width: 32vw;
height: 20vh;
display: inline-block;
}
#accomLabel {
background: url('../img/shelter.png') no-repeat;
}
<div class="container">
<div class="row jumbotron heading">
<h1 style="text-align: center;">foo</h1>
<h3 style="text-align: center;">bar</h3>
</div>
<form method="post" id="services_form">
<div class="row">
<div class="four">
<div class="button">
<input type="checkbox" id="accomButton"></input>
<label class="buttonLabel" for="accomButton" id="accomLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="foodButton"></input>
<label class="buttonLabel" for="foodButton" id="foodLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="medicalButton"> </input>
<label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
</div>
</div>
</div>
</form>
</div>

Answer 1

Seems fine, although you don't need input closing tags (</input>). Here's a demo with placehold.it image:
body {
width: 100vw;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.container {
width: 100%;
height: 100%;
margin: 0;
}
.jumbotron {
width: 100%;
float: left;
}
.four {
width: 32vw;
float: left;
margin-left: 2%;
/*background-color: #95a5a6;*/
}
.row {
width: 100vw;
height: 20vh;
clear: both;
padding: 0px;
margin: 0px;
}
.buttonLabel {
cursor: pointer;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"] + label {
width: 32vw;
height: 20vh;
display: inline-block;
}
#accomLabel {
background: url('http://placehold.it/54x54') no-repeat;
}
<div class="container">
<div class="row jumbotron heading">
<h1 style="text-align: center;">foo</h1>
<h3 style="text-align: center;">bar</h3>
</div>
<form method="post" id="services_form">
<div class="row">
<div class="four">
<div class="button">
<input type="checkbox" id="accomButton">
<label class="buttonLabel" for="accomButton" id="accomLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="foodButton">
<label class="buttonLabel" for="foodButton" id="foodLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="medicalButton">
<label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
</div>
</div>
</div>
</form>
</div>