CSS가 이미지를 픽셀 단위로 올바르게 자르지 못합니까 [Sprite Box]?

#paymentForm {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  background-color: #f9f9f7;
  border: 1px solid #fff;
  
  height: auto;
  padding: 13px 20px;
  margin-top:30px;
  width: 287px;
}
#paymentForm span{color: #555555; font-size: 11px}

#paymentForm li {
  margin: 8px 0;
}

#paymentForm label {
  color: #555;
  display: block;
  font-size: 14px;
  font-weight: 400;
}
#paymentForm input[type=text]{
  background-color: #fff;
  border: 1px solid #e5e5e5;
  color: #333;
  display: block;
  font-size: 18px;
  height: 32px;
  padding: 0 5px;
  width: 275px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}
#paymentForm input::-webkit-input-placeholder {
  color: #ddd;
}
#paymentForm input:-moz-placeholder {
  color: #ddd;
  opacity: 1;
}
#paymentForm input::-moz-placeholder {
  color: #ddd;
  opacity: 1;
}
#paymentForm input:-ms-input-placeholder {
  color: #ddd;
}
#paymentForm input:focus {
  outline: 1px solid #3388dd;
}
    #paymentForm #card_number {
        background-image: url(https://i.stack.imgur.com/nGINL.png), url(https://i.stack.imgur.com/nGINL.png);
        background-position: 2px -121px, 260px -61px;
        background-size: 120px 361px, 120px 361px;
        background-repeat: no-repeat;
        padding-left: 54px;
        width: 225px;
        height: 20px;
    }
    #paymentForm #card_number.visa {
        background-position: 2px -163px, 260px -61px
    }
    #paymentForm #card_number.visa_electron {
        background-position: 2px -205px, 260px -61px
    }
    #paymentForm #card_number.mastercard {
        background-position: 2px -247px, 260px -61px
    }
    #paymentForm #card_number.maestro {
        background-position: 2px -289px, 260px -61px
    }
    #paymentForm #card_number.discover {
        background-position: 2px -331px, 260px -61px
    }
    #paymentForm #card_number.valid.visa {
        background-position: 2px -163px, 260px -87px
    }
    #paymentForm #card_number.valid.visa_electron {
        background-position: 2px -205px, 260px -87px
    }
    #paymentForm #card_number.valid.mastercard {
        background-position: 2px -247px, 260px -87px
    }
    #paymentForm #card_number.valid.maestro {
        background-position: 2px -289px, 260px -87px
    }
    #paymentForm #card_number.valid.discover {
        background-position: 2px -331px, 260px -87px
    }

    #paymentForm #card_number.amex {
      background-position: 2px -373px, 260px -61px;
    }
    #paymentForm #card_number.valid.amex {
      background-position: 2px -373px, 260px -87px;
    }

<div id="paymentForm">
  
  <input type="text" name="card_number" id="card_number" class="valid visa"  maxlength="20" placeholder="1234 5678 9012 3456">
</div>