Using different images for checkboxes in CSS

I have seen questions asking how to replace the checkbox with an image which have been answered, but I am having a separate issue. I am trying to make a form with multiple check boxes, each with a different image to be used as the button by the user. Every time I try to have 2 different images, one won't show, and only one button will work. Any help is appreciated!

Here's my code:

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


     .services_form input[type=checkbox]:checked + label
     {
              background-color: #bdc3c7;
              background-size: 100%;
              height: 250px;
              width: 250px;
          opacity: 0.5;
              display:inline-block;
              padding: 0 0 0 0px;
     }


     .services_form input[type=checkbox] + label
     {
              background-size: 100%;
              height: 250px;
              width: 250px;
              display:block;
              float: left;
              padding: 0 0 0 0px;
              cursor: pointer;
     }

    #accomButton{
             background: url("button1.png") no-repeat;
    }

    #fooBar{
         background-image: url("button2.png");
    }

    .button {
             float: left;
             width: 35%;
             height: 35%;
             border-radius: 15%;
             margin: 5% 5% 5% 5%;
    }

    <form class="services_form">
        <div class="accomButton">
        <input type="checkbox" id="accomButton"></input>
        <label for="accomButton" id="accomLabel"></label>
        </div>
        <div class="button">
        <input type="checkbox" id="foo"></input>
        <label for"foo" id="fooBar"></label>
        </div>
    </form>