CSS: How to set url image properly to checked checkbox

I have this scenario, I have this list of checkbox with corresponding image for it, If the checkbox is checked, I want to append black circle at the back of checkbox image

Sample current output:

Sample expected output:

Code for populating checkbox:

<div
                key={item.id}
                className="chk-multiple-badge form-check form-check-inline"
              >
                <input
                  className="chkbox-badge form-check-input"
                  type="checkbox"
                  id={item.id}
                />
                <label
                  htmlFor={item.id}
                  className="form-check-label form-check-label-badge"
                >
                  <Row>
                    <Col>
                      <img
                        className="chk-badge-img"
                        src={item.imgBase64}
                        alt={item.badge_name}
                      />
                    </Col>
                  </Row>
                  <Row>
                    <Col>{item.badge_name}</Col>
                  </Row>
                </label>
              </div>

And CSS for checkbox:

:checked + .form-check-label-badge:before {
  content: url("../../../../assets/images/checkd-badge.png");
  position: absolute;
  cursor: pointer;
}
.chkbox-badge {
  display: none;
}