Мой заказик простой
Хотелось бы получить сведения о создании красивых бэкграундов для веб-странички (не в 1*1 пиксель рзмером
)
1. Указание атрибута bgcolor и background у тега <body> которые отвечают за цвет и изображение соответственно. Код выглядит следующим образом:...<body bgcolor="#cc0000" background="images/red_background.jpg">
2. Использование свойств группы background в CSS. К ним онтосятся:
- background-color: указывает на цвет фона страницы. Может принимать как строчное значение с названием цвета, так и числовое значение в RGB системе.
/* В данном примере все записи устанавливают один и тот же цвет фона - красный*/
body {
background-color: red;
background-color: #f00;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgb(100%, 0%, 0%);
}
- background-image: указывает путь к файлу изображения для фона.
body {
background-image: url('images/site_background.jpg');
}- background-repeat: данное свойство отвечает за размножение изображения для фона. Может принимат значения repeat (изображение размножается горизонтально и вертикально), repeat-x (изображение размножается только горизонтально), repeat-y (изображение размножается только вертикально), no-repeat (изображение не размножается: выводится только одна копия изображения).
body {
background-image: url('images/site_background.jpg');
background-repeat: repeat-x;
}- background-attachment: указывает будет ли фон прокручиваться вместе с содержимым страницы (значение scroll) или не будет прокручиваться (значение fixed).
body {
background-image: url('images/site_background.jpg');
background-attachment: fixed;
}- background-position: указывает в каком месте будет размещено исходное изображение для фона. Для указания этого места используются пары значений для задания координаты х и у соответственно относительно верхнего левого угла браузера. Такими значениями могут быть величины в процентном отношении к ширине и высоте окна браузера (background-position: 20% 30%;), значения в пикселях (background-position: 200 300;), или пары значений для вертикального (top, middle, bottom) и горизонтального (left, center, right) позиционирования.
/*В данном случае изображение будет размножено по центру окна в вертикальном направлении*/
body {
background-image: url('images/site_background.jpg');
background-position: top center;
background-repeat: repeat-y;
}
С теорией пока все.
Насколько я понял Alder'а интересует процесс создание размножаемого фона, чтобы не было заметно стыков? Делается это следующим образом: | 01. Создаем в фотошопе новый документ, скажем 320х494 пикселей. Рисуем на нем какой-нибудь узор. |
 | 02. Далее используем фильтр Offset (Filter > Other > Offset...). В поле Horizontal указываем половину от ширины нашего изображения, т.е. 160 пикселей. При этом изображение сдвигается на половину, переходя на левую сторону. |
 | 03. Продолжаем дорисовывать нашу плитку для фона. |
 | 04. Опять сдвигаем изображение по горизонтали на половину ширины. |
 | 05. Заполняем пустое пространство (если это необходимо). |
 | 06. Опять сдвигаем по горизонтали на половину ширины. |
 | 07. Заполняем пустое пространство (если это необходимо). |
 | 08. Сдвигаем изображение по вертикали на половину высоты. |
 | 09. Заполняем пустое место. При необходимости эту процедуру можно повторить несколько раз. В итоге мы получаем готовую плитку для заполнения фона страницы. |
 | 10. Приведены изображения с размноженными плитками разного размера. |
Теперь создадим на основе уже полученной плитки новую, которая будет размножаться нами только по горизонтали в верху страницы. | 01. За основу возьмем плитку размером 40х62 пикселя. Откроем ее в фотошопе. |
 | 02. Определим ее как шаблон. Для этого выделим все изображение (Select > All или Ctrl+A) и выберем пункт меню Edit > Define Pattern... Назовем наш шаблон cell =) |
| 03. Создадим новое изображение ширина которого будет такой же как и у нашей плитки 40 пикселей, а высота в несколько раз больше, 600 пикселей. |
| 04. Заполним теперь новое изображение нашим шаблоном cell. Для этого выберем пункт меню Edit > Fill... |
 | 05. В появившемся диалоге выберем в поле Use значение Pattern, а ниже в поле Custom Pattern наш шаблон cell. |
 | 06. Мы получим изображение заполненное по вертикали нашим шаблоном. |
 | 07. Добавим теперь в нижней части градиент переходящий из прозрачного в цвет нашего фона. Таким образом мы получили изображение плитки которой можно заполнить нашу страницу. К тегу <body> был применен следующий стиль: body {
background: url('hor-fill.jpg') #f1eecd top left repeat-x;
} |
