Проблема с графикой (repeat-x/y)

Проблема с графикой (repeat-x/y)

alleclf

Старожил

Сообщения: 446
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать

Здравствуйте.

Решил немного усовершенствовать дизайн сайта и оптимизировать графику. Все (похожие) картинки сбиваю в один файл, а потом подключаю где надо выборкой.

Вот для примера рамка сайта. Все составляющие части этой рамки находятся в файле "borders.png" (картинка ниже). Я всегда подключаюсь к этой картинке просто использую ее разные части.

Код ксс ондого блока (тут сам фон рамки, картинка ссылки и картинка ссылки при наведении):

Код:

.bookmark_fdb_d { width: 160px; height: 48px; background: url("../images/borders.png") no-repeat -173px -0px; }
.bookmark_fdb_d a img { width: 160px; height: 48px; background: url("../images/borders.png") no-repeat -322px -49px; }
.bookmark_fdb_d a:hover img { background-position: -322px -0px; }

В этом куске кода все рабочее, тоесть то что НЕ повторяется (угловые картинки) работает как надо, а вот то что я хочу замостить (горизонтальная или вертикальная рамка) нив какую не хочет.

Для горизонтали/вертикали пишу примерно так:

Код:

.bookmark_fdb_d { width: 1px; height: 48px; background: url("../images/borders.png") repeat-х -196px -0px; }

в результате у меня повторяется вся картинка (что ниже) только начиная с той позиции какую я указал (вроде как хвост не обрезается).

Помогите пожалуйста решить мою проблему. Как можно замостить картинкой область неопределенной длинны именно таким методом.
+ Если можно ссылки где можно подробнее почитать про такой подход, а то я запрос в поисковик не могу сформировать что бы найти хоть что-то.

Спасибо.

Сама картинка вот такая: