Фон добавлен к span не полностью видно. Как исправить?

Question

[freeman0204]

Есть такой код:

.top-line span:nth-of-type(1) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAACDUlEQVQoU22SUUiTURTH77mfDhGTtY0c+KJQVASNIvGbQiG9ha89RbCNKCgKsZBMwjmI6qFA2EOE6FB88s1An0oINz8lIqJ6qEDoxXTfl2KG6fZ9x3O/3W+tu124cM7vnv85595zgVWsWNbsAM76CF2g3Ur7JzL2mgGkM3rQ8ELBM2K5fAoAhsjnlYmkjQg42tYZupsEcFxRwrAeImKqRrCC4NlENHgPEov546jBJzqtkxHfKO2QxuzvNtOOAuAj4sfkmQPcPgvxJXOUwB0J3xcbi+enIuE/XombCxtNuw38LflnXAZsUoi+kHmy5PNL49HAvNpmPJfvpcd4JfkPIdojxyeABnZ4TG9ZV0WxlY0w2Hyt3GLcMDcZMr8ANvDIpB74qIoSy+sRdLQPkv8WlbLkdEmQnoiGbldVyplpAHZLcJrbihANkP1UBiLBQV998PnLc1C4/g7r9wtWP83lsXvlkuoBXDGsZh/iV3JbKir8oohVStBOLOBxyrhW4HDCVcvXmS1nU/sr+TQ+pzejH5krf6OEYd6nTKKNmovuNDiuh56Iw7LIrWhYLyjfDVVFbU7Th71KsyJTEV3+jL5D2+YbZND9T4iLO82hizOnYN9j/1US8NryVrvtFMWsmmjvaLzu9Finf7WyepVIHMaWrGFgmKSKyUw0OKK2W1u0sOmHBjuLf7XuTM/hLVV0AKYVtZ6H1DLPAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: left -4px;
    height: 18px;
}

screenshot.ru/510345932448df457113ebb87230716c
поднял фон на -4px но он перекрывается. Как исправить? Добавлял верхний падинг спану, не помогло.

Answer 1

[Freddi]

у него высота задана, незнаю весь зависимый цсс могу предположить что там есть overflow и поэтомы фон режется, я так понял хотите выровнять этот блок, надо дигать не фон а весь span например или его родителя.

Answer 2

[AlexRas]

https://jsfiddle.net/x1j5f9z1/4/

Answer 3

[Donald Dak]

Вместо -4px
background-position: left -4px;
поставьте center.