input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: 40px;
      background: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 30px;
      height: 40px;
      background: url('Fotos/LutzKopf.png') no-repeat center center;
      background-size: cover;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 2;
      margin-top: -17px; /* aligns thumb to center of track */
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 6px;
      width: 100%;
      background: #ccc;
      border-radius: 3px;
    }

    input[type=range]::-moz-range-thumb {
      width: 30px;
      height: 40px;
      background: url('Fotos/LutzKopf.png') no-repeat center center;
      background-size: cover;
      border: none;
      cursor: pointer;
    }

    input[type=range]::-moz-range-track {
      height: 6px;
      background: #ccc;
      border-radius: 3px;
    }