Расположение фонового рисунка в документе
Как расположить фоновый рисунок в html-странице? Да легко.
Чтобы поместить в определенне место документа фоновый рисунок, скажем, только в левом верхнем углу ячейки или прямо посередине страницы – используйте CSS.
Синтаксис в документе:
<тег style="background: картинка вертикаль горизонталь размножение цвет прокрутка">
Синтаксис в листе стилей:
тег
{ background-image: url();
background-position: положение;
background-repeat: размножение;
background-color: цвет;
background-attachment: прокрутка;
}
Значения:
1. «тег» –
Ваш текстовый тег, например, body, table,
td, div, blockquote или даже p,
вобщем, куда Вы захотите вставить фоновый рисунок.
В этом случае стиль будет применяться везде, где Вы будете использовать указанный тег.
Или Ваш класс: .class-for-fon.
В этом случае для применения стиля присвойте тегу класс:
<p class="class-for-fon">
2. «url()» – background-image –
Путь (url) к картинке, которую Вы хотите разместить в качестве фона, например, url(../pic/fon.jpg).
3. «вертикаль» – background-position –
Положение картинки, задаваемое значение по вертикали:
top
center
bottom
4. «горизонталь» – background-position –
Положение картинки, задаваемое значение по горизонтали:
left
center
right
5. «размножение» – background-repeat –
Значение направления, по которому будет размножаться фоновый рисунок:
repeat
repeat-x
repeat-y
no-repeat
6. «цвет» – background-color –
Цвет фона. Рекомендуется указывать в той гамме, что и фоновая картинка, если она размножена по всей странице.
7. «прокрутка» – background-attachment –
Значение, которое определяет, будет ли фоновая картинка зафиксирована в окне брайзера или будет прокручиваться вместе с документом.
По умолчанию значение scroll. Не рекомендуется использовать по причине «торможения» при прокрутке.
fixed
scroll
Пример:
Размножим фоновую картинку (например, градиент) в ячейке таблицы по вертикали слева:
<table>
<tr>
<td style="background:
url(pic/bg.jpg)
left
repeat-y
#CCCC99">
 Джунгарский хомяк.
Размером вдвое меньше золотистого хомячка (с крупную мышь) джунгарский хомячок подкупает удивительно милым обликом пушистого, добродушного, почти бесхвостого увальня. Летом эти зверьки сероватые, с темной полосой вдоль хребта и светлым брюшком. Зимой, особенно при содержании в прохладных помещениях, хомячки становятся почти белыми, с серебристо-серым хребтом. Манерой набивать защечные мешки и запасать корм, а также пользоваться передними лапками, как руками, похожи на золотистого хомячка. Но джунгарские хомячки гораздо живее и активнее. Выпускать этих мелких сумеречных зверьков в комнату не рекомендуется: слишком велик риск что они одичают, потеряются или будут раздавлены. Продолжительность жизни зверьков около трех лет. В природных условиях этот хомячок обитает в степной и полупустынной зонах Западной Сибири и Средней Азии. Но за последние годы зверьки получили прописку в вивариях научных учреждений и в живых уголках любителей.
(http://www.ptichka.ru/)
А картинка с фоном – вот:
</td>
</tr>
</table>
|
Можно, конечно, вышепредложенный пример было описать и так:
<td style="
background-image: url(pic/bg.jpg);
background-position: left;
background-repeat: repeat-y;
background-color: #CCCC99;
background-attachment: scroll;
">
Оба варианта верны и работают в браузерах вплоть до Нетскейпа 4.7 :)
Так зачем платить больше? :)
|
