изображение не отображается для флажка (css)

Question

Я пытаюсь использовать изображения как флажки в макете сетки, но изображения не будут отображаться, и я не в порядке. Вот соответствующие css и html. Я дважды проверял адрес изображения, поскольку это было проблемой во многих других сообщениях здесь, но оно хранится по адресу, к которому обращаются. Любая помощь приветствуется.

body{ 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 
.container { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t margin: 0; 
 
} 
 
.jumbotron { 
 
\t width: 100%; 
 
\t float: left; 
 
} 
 
.four { 
 
\t width: 32vw; 
 
\t float: left; 
 
\t margin-left: 2%; 
 
\t /*background-color: #95a5a6;*/ 
 
} 
 
.row { 
 
\t width: 100vw; 
 
\t height: 20vh; 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 
.buttonLabel { 
 
\t cursor: pointer; 
 
} 
 
.button input[type="checkbox"] { 
 
\t display: none; 
 
} 
 
.button input[type="checkbox"] + label { 
 
\t width: 32vw; 
 
\t height: 20vh; 
 
\t display: inline-block; 
 
} 
 
#accomLabel { 
 
\t 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

Кажется хорошо, хотя вам не нужен ввод закрывающих тегов (</input>). Вот демо с placehold.it изображением:

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>