ТРИДЦАТЬ ДЕВЯТЫЙ УРОК



Background

Как же давно мне хотелось рассказать вам о заднем фоне! Еще когда писала 5-ый урок про Bgcolor и background! Уже тогда я хотела рассказать, как можно управлять этой самой штукой. Но было еще слишком рано. Вы тогда были неоперившимися птенцами, молодыми и неопытными, вы только-только начала понимать, что такое back, а что такое ground...

Хм.. пока я писала эти уроки, у вас может уже и дети появились, и внуки... Да, трудно быть бизнес-леди, трудно совмещать работу, домашнее хозяйство и вот эти мои любимые, выстраданные авторские уроки, которые, увы... не приносят выгоды. Недавно меня один человек спросил - а зачем вообще тебе этот сайт, раз он не приносит выгоды, стоит ли за него платить? И знаете, что я ему ответила? Конечно знаете! Я ответила - раз мне это интересно, то стоит! А иногда я захожу на ссылающиеся на мой сайт ваши страницы... и знаете... такая радость на душе. Ну я отвлеклась. Вам ведь не это нужно... вам нужно совсем другое! :)) Так что продолжу...

С помощью backgrounda можно установить цвет, положение, изображение, привязку и повторяемость. Сейчас все это объясню подробно. Раз уж вообще решила посвятить вам целый день, так уж мелочиться не буду.


Background-color

Вы скажете = "ха!", типа не дураки и сами догадались, что с помощью этого атрибута можно установить цвет фона. И я с вами соглашусь. Но только наполовину! Потому как этот цвет теперь можно установить не только для фона всей страницы, или, скажем для таблицы или одной его ячейки, а вообще для любого элемента! Хочешь, для абзаца, хочешь - для заголовка, а хочешь - короче, сами думайте, что вы хотите! И сразу приведу примерчик. Как же без него?

H4 { background-color: yellow; } LI { background-color:silver; } P { background-color:red; }

А вот и полный код:

<HTML> <HEAD> <TITLE>BACKGROUND-COLOR</TITLE> <STYLE type="text/css"> H4 { background-color: yellow; } LI { background-color: silver; } P { background-color: red; } </STYLE> </HEAD> <BODY> <h4>Стихотворение о пропавшей собачке</h4> <p>Старушка сдавала в багаж: <ul> <li>диван <li>чемодан <li>саквояж... </ul> Вот какой жалостливый стишок!!! </BODY> </HTML>

Открываем браузер и видим:

Думаю, тут все легко и просто. И проблем особых возникнуть не должно, а значит, идем скорей дальше!


Background-image

А сейчас будет еще интереснее! Будем рисовать картинки! Вы как хотите, а я открываю Adobe Photoshop, включаю свое, пусть не богатое, но воображение и рисую три картинки. Вот такие:

1 2 3

Сохраню их в папочке image под именами 1.jpg; 2.jpg и 3.jpg. Ну, и немного изменим значения в предыдущем примере:

H4 { background-image: url(image/1.jpg); } LI { background-image: url(image/2.jpg); } P { background-image: url(image/3.jpg); }

И вот что тогда у меня получится:

А если мы, например, не хотим, чтобы фон повторялся, то мы это запросто сможем выполнить в следующем разделе!


Background-repeat

Это свойство определяет, будет ли фоновое изображение заполнять все пространство (b>repeat - по умолчанию), либо не будет размножаться вообще (no-repeat), либо размножится только по горизонтали (repeat-x), или по вертикали (repeat-y). Что мы сейчас и воспроизведем.

Пусть для общего фона будет у нас нежно-салатовый цвет и картинка вот такая:


назову, пожалуй, картинку ris5.gif и помещу ее в ту же папочку image.

Ну, а далее, примерно то же, что было в предыдущих примерах. Для полноты счастья, приведу весь код полностью.

<HTML> <HEAD> <TITLE>BACKGROUND-IMAGE</TITLE> <STYLE type="text/css"> BODY { background-color: #CCFFCC; background-image: url(image/ris5.gif); background-repeat: repeat-y; } H2 { background-image: url(image/ris1.jpg); background-repeat: repeat-x; } LI { background-image: url(image/ris3.jpg); } P { background-image: url(image/ris2.jpg); background-repeat:repeat-y; } </STYLE> </HEAD> <BODY> <center> <h2>Стихотворение о пропавшей собачке</h2> </center> <p>Старушка сдавала в багаж:</p> <ul> <li>диван <li>чемодан <li>саквояж... </ul> <p> Вот какой жалостливый стишок!!! Если помните, то этой бедной старушке вместо ее белой, маленькой и пушистой болонки (а может и мопса), подсунули беспородного, лохматого и здорового пса! Вот как работает таможня! </p> </BODY> </HTML>

Ну и вот что получилось. Может и не шедевр, зато столько всего!


Background-position

Это свойство позволяет расположить наш фоновой рисунок в точно заданом месте. Оно может быть задано и в числах, и в процентах, и в словосочетаниях top, center, bottom, left или right

Рассмотрим это на примере таблицы. Пусть у нас фон состоит из картинки fon.gif, которая находится в папке "image":

А вот наша таблица:

td style="background-image:url(image/fon.gif);
background-repeat:no-repeat"
Это ячейка таблицы, в которой фон задан без повторений. Как видим, он прилип к левому верхнему углу ячейки.
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:100px 20px"
Это ячейка таблицы, в которой фон отстоит от верхнего угла ячейки на 100px вправо по горизонтали и на 20px вниз по вертикали
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:50% 30%"
Это ячейка таблицы, в которой фон отстоит от верхнего угла ячейки на 50% вправо по горизонтали и на 30% вниз по вертикали
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:top"
Это ячейка таблицы, в которой фон выровнялся по верхнему краю
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:bottom"
А тут - по нижнему!!!
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:left"
Слева...
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:right"
Справа!
td style="background-image:url(image/fon.gif);
background-repeat:no-repeat;
background-position:center"
И зафутболили нашу голову в самый центр ячейки! Уррррррррррррррррррааааааа!!!!


Background-attachment

Ну, и последнее, что можно сказать о нашем фоне - что его можно сделать неподвижным. То есть при прокрутке страницы он может оставатьс на одном месте. Правда, работает это не во всех браузерах. Так что смотрите сами - стоит этим заниматься или нет. Меня же лично это раздражает. Иногда заходишь на страничку, проворачиваешь ее, а фон дергается - дергается. Как нервный. И я тоже злиться начинаю. Хотя я вот сделала, и у меня ничего не дергается. Вроде. Так что напишу в стилях для тела документа следующее значения:

BODY { background-color: #CCFFCC; background-image: url(image/lilia.gif); background-repeat: repeat-y; background-attachment: fixed; attachment-position: left; attachment-position:top; }

Наверняка вы подумаете - это ж опухнуть можно столько писать! И правильно! Потому что можно написать коротко и ясно:

BODY { background: #CCFFCC url(image/lilia.gif) repeat-y fixed left top; }

И всю эту красоту мы добавим в файл, расписанный в разделе "Background-repeat". Сократим лишние записи, сохраним... и получится у нас... ну-ка скорее откройте страничку, нажав на эту ссылку! Обратите внимание, что красная полоса слева остается неподвижной, даже если все остальное мы прокручиваем!

Вот и все на сегодня. Вряд ли я успею до Нового, 2005 года выпустить еще один урок. Дела, знаете ли... Так что с наступающим вас Новым годом, всех благ и успехов в построении своих сайтов! До встречи в будущем году!


К списку всех уроков

(В. Ахметзянова, 2005 г)