Фотографии Донецк, Киев, Москва
...
 
 

FAQ html, css, java-script, ssi

 

Расположение фонового рисунка в документе

Как расположить фоновый рисунок в 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 :)

Так зачем платить больше? :)

 

...

Немного о Донецке

Донецк. Каким ты был и каким стал
Фотографии Донецка: каким город был и каков он сейчас
 
Донецк. Скифская аллея
Скифская аллея
бульвар Пушкина, Донецк
 
Есть вопрос? Задайте!
  • ...
 
 
 
 
Стикер
...