PDA

Просмотр полной версии : HTML верстка: задний фон из 2-ух картинок


kost@
11.11.2005, 13:46
Кто силен в верстке, поможите плиз...
Нужно сделать задний фон из 2-ух картинок: одна сверху - без повтора, вторая ниже с повтором по Y. При этом контент HTML страницы должен ложиться на оба фона сразу (см. рисунок).

Пробовал сделать так:
создаю 2е таблицы - одна в другой. Во внешней устанавливал задним фоном первую картинку без повторов:background-image: url(img/1.gif);
background-repeat: no-repeat;
Во второй таблице - вторую картинку, но со смещением по Y и повтором по Y:background-position: 0px 300px;
background-image: url(img/2.gif);
background-repeat: repeat-y;
Дело в том, что если ставишь "repeat-y", то не действует почему-то "background-position: 0px 300px;", т.е. второй бекграунд накладывается на первый. Других решений почему-то не приходит.

Skubent
11.11.2005, 14:15
Вот так вот:
<style>
.cly {
background-image: url(2.gif);
background-repeat: repeat-y;
}

.cln {
background-image: url(1.gif);
background-repeat: no-repeat;
}
</style>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr><td class='cln'>
Content1
</td></tr>
<tr><td class='cly'>
Content2<br>
</td></tr>
</table>

Все прекрасно работает без всякой суеты с позиционированием бэка.

kost@
11.11.2005, 15:00
Не, братан, извини, не подходит - приходиться разбивать контент на 2-е части. Я, наверное, не правильно сформулировал, или ты меня не правильно понял, но мне нужно, чтобы контент не разбивался на части. Но решение нашел. Как всегда все на проверку просто...
<table width=760 cellpadding=0 cellspacing=0 style="background-image: url(img/3.gif);">
<tr><td height=300 width=100% style="background-image: url(img/2.gif); background-repeat: no-repeat; padding: 0,20,0,20;">
CONTENT
</td></tr></table>

rewue
14.11.2005, 19:16
Есть вариант - взять два дивижна и наложить один на один - у обоих задать бекграунд и все прекрасно работает. В моей подписи есть ссылка на мой сайт - для шапки я как раз и использовал такой вариант

kost@
14.11.2005, 19:24
ну да, есть тысяча и один способ это сделать, я уверен! мой вариант сработал - и хорошо...
Кстати, при наложении DIVов придется работать с абсолютным позиционированием? А если координаты не известны?!... Пройдет твой вариант?

KidsKilla
14.11.2005, 22:36
<style>
#txt{background:url(img/1.gif) top left no-repeat;}
#txt DIV{background:url(img/2.gif) 0 0 repeat-y;}
</style>
<div id="txt"><div>
текст тут
</div></div>

rewue
15.11.2005, 20:10
ну да, есть тысяча и один способ это сделать, я уверен! мой вариант сработал - и хорошо...
Кстати, при наложении DIVов придется работать с абсолютным позиционированием? А если координаты не известны?!... Пройдет твой вариант?
Пройдет. Можно значения задать и скриптом. expression и все тут :)