Работа с фоном. Фоновое изображение на практике
Раздел: HTML 04-12-2004 FAQ оптимизатору на форуме ZenBroker
Автор -
Михаил Дубаков
Повторение
В HTML для вставки изображения есть атрибут BACKGROUND. Все бы ничего, но вот повторялось изображение как хотело. То есть если у вас была таблица 200х200 и рисунок 100х100, то в таблице вы увидите ровно четыре одинаковых рисунка.
<TABLE WIDTH=200 HEIGHT=200 BACKGROUND="fon.gif">
<TR VALIGN=top><TD>четыре фоновых изображения</TD></TR>
</TABLE>
| четыре фоновых изображения |
Чтобы этого избежать, надо было сделать рисунок 200х200, загнать в верхний левый угол наше фоновое изображение, а остальную часть рисунка сделать прозрачной. Если же повторения надо было избежать для всей страницы, то рисунок приходилось делать 1200х900 и более. С появлением CSS проблема ушла в прошлое, сейчас для этих целей служит свойство background-repeat. Например, можно вообще запретить повторение изображения.
<DIV STYLE="width: 200px; height: 200px; border: 1px solid #000; background: url(fon.gif) no-repeat">
одно фоновое изображение
</DIV>
Повторение по одной из осей тоже очень полезная штука. Например, сделал дизайнер что-то вроде этого:
Верстается эта конструкция достаточно сложно. Во-первых, надо сделать градиент у красной полосы, во-вторых, каким-то образом реализовать хитрый переплет. Если верстать простыми таблицами, то ничего не выйдет. Переплет разделяется на две части. Нижняя часть все время находится на красном фоне, а вот верхняя часть то на красном, то на белом, то на желтом (его на скриншоте не видно). Но проблема не в этом, потому что можно сделать прозрачный гиф. Проблема в том, что дизайн резиновый, то есть колонки растягиваются, и возникнут проблемы со стыковкой переплета. Смотрите, если мы как положено сделаем таблицу и запихнем в нужные ячейки переплет в виде фонового рисунка, то он не будет стыковаться между ячейками при некоторых разрешениях. Короче выглядеть все будет вот так:
Резиновый дизайн обуславливает и то, что нельзя разбивать макет на отдельные таблицы, чтобы сохранить одинаковые ширины колонок при некоторых разрешениях. То есть вся страница заверстывается в одну большую таблицу. Как же решить проблему? Решение, как вы догадываетесь, есть. Надо сделать отдельный слой, в котором будет прописан background в виде одного элемента переплета. Слой должен накладываться на всю таблицу. Сперва мы верстаем таблицу так, словно никакого переплета нет, а затем позиционируем слой с переплетом на нужное нам место:
#to {
position: absolute;
top: 74px;
left: 0px;
width: 100%;
color: #000;
background: url(i/bgall.gif) repeat-x;
z-index: 10}
. . .
<DIV id=two>
<IMG SRC=../i/css/0.gif WIDTH=1 HEIGHT=25 ALT="">
</DIV>
Позиционирование
Ну и напоследок давайте рассмотрим, зачем может понадобиться позиционирование фонового изображения. Допустим, надо сверстать что-то вроде этого:
Три колонки, между которыми есть разделительная пунктирная линия. Если верстать таблицами, то нам надо сделать пять столбцов. Если же верстать блоками, то надо сделать всего лишь три блока. Как же тогда реализовать разделители? Очень просто, с помощью background-position. У нас три блока примерно с таким кодом:
#left-col {
width: 25%;
float: left}
#main-col {
width: 50%;
float: left}
#right-col {
width: 25%;
float: left}
. . .
<DIV ID=left-col>
</DIV>
<DIV ID=main-tcol>
</DIV>
<DIV ID=right-col>
</DIV>
Чтобы создать разделитель, нам надо в графическом редакторе вырезать один элемент последовательности, то рисунок 1х5 пикселей, который будет состоять из одной черной точки и четырех белых. После этого надо его внедрить в блок #left-col и заставить повторяться только по вертикали. А затем позиционировать его на 100%, то есть максимально вправо:
#left-col {
width: 25%;
background: url(bg.gif) repeat-y;
background-position: 100% 0%;
float: left}
Обратите внимание, что позиционирование фонового изображения производится относительно блока, то есть ширина блока у нас 25% относительно ширины экрана, а позиционируется он на 100% относительно ширины блока, то есть на 25% относительно ширины экрана. Совершенно аналогично поступаем с блоком main-col (для сокращения кода запишем все свойства фона в background):
#main-col {
width: 50%;
background: url(bg.gif) repeat-y 100% 0%;
float: left}
Собственно говоря, больше ничего сложного в работе с фоном нет. Для вас, я надеюсь, тоже.
