Как же давно мне хотелось рассказать вам о заднем фоне! Еще когда писала 5-ый урок про Bgcolor и background! Уже тогда я хотела рассказать, как можно управлять этой самой штукой. Но было еще слишком рано. Вы тогда были неоперившимися птенцами, молодыми и неопытными, вы только-только начала понимать, что такое back, а что такое ground...
Хм.. пока я писала эти уроки, у вас может уже и дети появились, и внуки... Да, трудно быть бизнес-леди, трудно совмещать работу, домашнее хозяйство и вот эти мои любимые, выстраданные авторские уроки, которые, увы... не приносят выгоды. Недавно меня один человек спросил - а зачем вообще тебе этот сайт, раз он не приносит выгоды, стоит ли за него платить? И знаете, что я ему ответила? Конечно знаете! Я ответила - раз мне это интересно, то стоит! А иногда я захожу на ссылающиеся на мой сайт ваши страницы... и знаете... такая радость на душе. Ну я отвлеклась. Вам ведь не это нужно... вам нужно совсем другое! :)) Так что продолжу...
С помощью backgrounda можно установить цвет, положение, изображение, привязку и повторяемость. Сейчас все это объясню подробно. Раз уж вообще решила посвятить вам целый день, так уж мелочиться не буду.
Background-color
Вы скажете = "ха!", типа не дураки и сами догадались, что с помощью этого атрибута можно установить цвет фона. И я с вами соглашусь. Но только наполовину! Потому как этот цвет теперь можно установить не только для фона всей страницы, или, скажем для таблицы или одной его ячейки, а вообще для любого элемента! Хочешь, для абзаца, хочешь - для заголовка, а хочешь - короче, сами думайте, что вы хотите! И сразу приведу примерчик. Как же без него?
H4 {
background-color: yellow;
}
LI {
background-color:silver;
}
P {
background-color:red;
}
А вот и полный код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>BACKGROUND-COLOR</title>
<style type="text/css">
h4 {
background-color: yellow;
}
li {
background-color: silver;
margin-bottom: 5px; /* Чтобы полоски фона не слипались */
}
p {
background-color: red;
color: white; /* На красном фоне белый текст лучше читается */
}
</style>
</head>
<body>
<h4>Стихотворение о пропавшей собачке</h4>
<p>Старушка сдавала в багаж:</p> <!-- Закрыли абзац -->
<ul>
<li>диван</li>
<li>чемодан</li>
<li>саквояж...</li>
</ul>
<p>Вот какой жалостливый стишок!!!</p>
</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.
Ну, а далее, примерно то же, что было в предыдущих примерах. Для полноты счастья, приведу весь код полностью.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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");
background-repeat: no-repeat; /* Чтобы иконка не размножалась */
background-position: left center; /* Прижать к началу строки */
padding-left: 25px; /* Отступ текста, чтобы не перекрывал картинку */
list-style: none; /* Убираем стандартную точку, раз есть картинка */
}
p {
background-image: url("image/ris2.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<center>
<h2>Стихотворение о пропавшей собачке</h2>
</center>
<p>Старушка сдавала в багаж:</p>
<ul>
<li>диван</li>
<li>чемодан</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 года выпустить еще один урок. Дела, знаете ли... Так что с наступающим вас Новым годом, всех благ и успехов в построении своих сайтов! До встречи в будущем году!