CSS/HTML как правильно раместить спрайт на странице?

хочу сделать панель навигации из 1-го спрайта

имеется вот такая картинка 150x70 px:



она представляет собой спрайт, условно разд. на 3 части по 50px - левый бок, центр (тут будет конект) и правый бок.

так вот, задача такова, что центр должен расстягиваться в соотв. с кол-вом текста, т. е. ссылок

я спрайты только постигаю и никак не могу понять, вот отрывок из css, отн. конкр. ко второй части картинки:

.conect {
background-image: url(sprite_panel1.png);
background-position: -50 0;
background-repeat: repeat-x;
width: auto;
height: 70px;
}

здесь задана только первая позиция для второй части, а КАК ЗАДАТЬ ВТОРУЮ ПОЗИЦИЮ, иначе спрайт читается до конца, т. е. вкл. третью часть!

короче получается такая фигня: