alleclf
27-07-2010, 09:34
Здравствуйте.
Решил немного усовершенствовать дизайн сайта и оптимизировать графику. Все (похожие) картинки сбиваю в один файл, а потом подключаю где надо выборкой.
Вот для примера рамка сайта. Все составляющие части этой рамки находятся в файле "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; }
в результате у меня повторяется вся картинка (что ниже) только начиная с той позиции какую я указал (вроде как хвост не обрезается).
Помогите пожалуйста решить мою проблему. Как можно замостить картинкой область неопределенной длинны именно таким методом.
+ Если можно ссылки где можно подробнее почитать про такой подход, а то я запрос в поисковик не могу сформировать что бы найти хоть что-то.
Спасибо.
Сама картинка вот такая:
http://i057.radikal.ru/1007/87/07b07efa054f.png
Решил немного усовершенствовать дизайн сайта и оптимизировать графику. Все (похожие) картинки сбиваю в один файл, а потом подключаю где надо выборкой.
Вот для примера рамка сайта. Все составляющие части этой рамки находятся в файле "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; }
в результате у меня повторяется вся картинка (что ниже) только начиная с той позиции какую я указал (вроде как хвост не обрезается).
Помогите пожалуйста решить мою проблему. Как можно замостить картинкой область неопределенной длинны именно таким методом.
+ Если можно ссылки где можно подробнее почитать про такой подход, а то я запрос в поисковик не могу сформировать что бы найти хоть что-то.
Спасибо.
Сама картинка вот такая:
http://i057.radikal.ru/1007/87/07b07efa054f.png