estou com dificuldade de colocar uma img de fundo assim q eu clicar no card alguem pode me ajudar?

<main>
            <div class="container">
                <input type="checkbox" id="cards">
                    <label for="cards"  class="row posicao-card"> 
                        <span  class="card borda-cor-especial col-md-2 col-4 " >
                          <img src="download (1).jfif " class=" card-posicao-imagem" alt="...">
                        </span>
                        <span class="card borda-cor-especial col-md-2 col-4" >
                          <img src="download (2).jfif " class=" card-posicao-imagem" alt="...">
                        </span>
                        <span class="card borda-cor-especial col-md-2 col-4" >
                          <img src="download (3).jfif " class=" card-posicao-imagem" alt="...">
                        </span>
                        <span class="card borda-cor-especial col-md-2 col-4" >
                          <img src="download (4).jfif " class=" card-posicao-imagem" alt="...">
                        </span>
                        <span class="card borda-cor-especial col-md-2 col-4" >
                          <img src="download.jfif " class=" card-posicao-imagem" alt="...">
                        </span>
                    </div>
            </div>        
        </main>

.card{
    padding: 0;
    margin: 1rem 1rem 1rem;
}

.card-posicao-imagem {
    object-fit: cover;
    height: 230px;
}

.posicao-card{
    display:flex ;
    justify-content: center;
    margin-top: 20em;
}

.borda-cor-especial:active {
    border: 5px solid  #FF1493;

}

#cards{
    position: absolute;
    opacity: 0;
}

#cards:checked + label span:nth-child(1){
  background-image: url("download (1).jfif")!important;

}