Работаем с задним фоном в CSS

В этом небольшом уроке мы рассмотрим основные моменты, которые необходимо знать при работе с фоном web-страницы. Обычно фоновый цвет страницы белый, если его не указать принудительно. Отсюда явное указание будет не обязательным, хотя и не лишним:

 body {  background-color:#FFFFFF;  } /* Белый фон */

Существует несколько вариантов определения цвета. Например, вот несколько примеров задания зеленого цвета:

	b {color: green}
	b {color: #00FF00}
	b {color: rgb(0,255,0)} 

Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Для определения фоновой картинки используем следующий синтаксис. Для начала определим фоновое изображение, а также его расположение на странице:

body { padding: 0;  margin: 0; background-color:#FFFFFF; 
      background-image:url('/../images/ph.gif'); }/* Фоновая картинка расположена локально */ 
p {background-image: none}    /* Фоновая картинка для абзаца не задана */
table {background-image: 
url(http://www.portal.com/img.gif)}
      /* Фоновая картинка для таблицы используется из внешнего ресурса */

 

Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определённых точек изображения и блока содержимого. Их можно задать в процентах, в абсолютных единицах длины. Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

Обычно графическое изображение, использующееся в качестве фона, значительно меньше в размерах, чем сама страница. В этом случае Web-обозреватель многократно повторяет это изображение, выкладывая своего рода "мозаику", занимающую всю страницу. Управляют повторением фоновой картинки следующие атрибуты background:

no-repeat — отключает повторение. Изображение помещается на страницу всего один раз, в левом верхнем углу элемента;

repeat — включает повторение изображения по горизонтали и вертикали (поведение по умолчанию);

repeat-x — включает повторение изображения только по горизонтали;

repeat-y — устанавливает повторение изображения только по вертикали.

 

Иногда используются странички, у которых фоновое изображение неподвижно или двигается вместе с текстом. У IE для этого существует определенный параметр тега <body>, но он не входит в спецификию языка. Теперь с помощью CSS мы можем управлять и этим свойством странички. Как раз для этих целей существует параметр background-attachment. У него, как уже можно догадываться, существует два значения: scroll - для плавающего фона и fixed - для фиксированного.

Также положение изображения можно устанавливать в процентах. Для этого берется указанная в процентах точка на изображении и на элементе, а потом эти точки совмещаются. Поэтому если Вы запишите 15% 20%, то точка с координатами (15%,20%) на изображении совместится с точкой (15%,20%) на фоновой плоскости элемента. Для значений 0%, 50% и 100% существуют стандартные названия. По горизонтали это left, center, rigth, а по вертикали top, center, bottom. Поэтому запись "bottom left" или "left bottom" равносильны "0% 100%". Заметьте, что эти названия можно переставлять местами, потому что их просто различить. Последнее, что можно отметить по поводу выравнивая это то, что процентые и сантиметровые соотношения можно смешивать, т.е. можно писать "2cm 10%" или "bottom 5cm".

 

Есть возможность установки всех атрибутов фона одним махом. Для этого предназначается параметр background, который задает все остальные атрибыты. Все требуемые параметры просто перечисляются разом. Вот как это будет выглядить:

	body { background:#FFFFFF url('/../images/ph.gif') repeat-x; } 

На этом разрешите откланяться. Успехов Вам




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка