Фоновые изображения « background- image»

CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение смайл, примерный вид которого представлен на рис. 1.14. Вы можете использовать изображение, которое использовали для внедрения картинки в HTML-документ, создать новое, либо воспользуйтесь другим небольшим изображением. Сохраните это изображение в своей рабочей папке под именем Smile.jpg.

Рис. 1.14

Для вставки рисунка в качестве фонового изображения web-страницы просто примените свойство background-image для элемента body в файле style.css. В данном примере файл с рисунком Smile.jpg находится в той же папке, что и файл style.css.

  body {

  background-color: #FFCC66;

  background-image: url("Smile.jpg");

  }

  h1 {

  color: #990000;

  background-color: #FC9804;

  }

Повтор фонового изображения «background-repeat»

Вы заметили в предыдущем примере, что изображение смайла повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение	Описание
Background-repeat: repeat-x	Рисунок повторяется по горизонтали
background-repeat: repeat-y	Рисунок повторяется по вертикали
background-repeat: repeat	Рисунок повторяется по горизонтали и вертикали (по умолчанию)
background-repeat: no-repeat	Рисунок не повторяется

Например, для того, чтобы рисунок повторялся по вертикали, мы должны внести такие изменения в файл style.css:

----------------------------------------------------------------------------------------------

  body {

  background-color: #FFCC66;

  background-image: url("Smile.png");

  background-repeat: repeat-у;

  }

 

  h1 {

  color: #990000;

  background-color: #FC9804;

  }

-----------------------------------------------------------------------------------

Блокировка фонового изображения «background-attachment»

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В таблице указаны два значения background-attachment.

Значение	Описание
Background-attachment: scroll	Изображение прокручивается вместе со страницей - разблокировано
Background-attachment: fixed	Изображение блокировано

Попробуйте зафиксировать изображение используя такой код:

---------------------------------------------------------------------------------------

  body {

  background-color: #FFCC66;

  background-image: url("Smile.png");

  background-repeat: repeat-у;

  background-attachment: fixed;

  }

  h1 {

  color: #990000;

  background-color: #FC9804;

  }

-------------------------------------------------------------------------------------------

ПРИМЕЧАНИЕ. Если содержимое вашей HTML-страницы умещается на одном экране браузера, то работу свойства background - attachment вы оценить сможете, только уменьшив размеры окна браузера.

Расположение фонового рисунка «background-position»

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение «100px 200px» располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right.

В таблице приведено несколько примеров позиционирования элементов.

Значение	Описание
background-position: 2cm 2cm	Рисунок расположен на 2 см слева и на 2 см сверху
background-position: 50% 25%	Рисунок расположен по центру по горизонтали и на четверть экрана сверху
background-position: top right	Рисунок расположен в правом верхнем углу страницы

Например, для того, что бы разместить изображение в правом нижнем углу экрана в файле style.css можно использовать следующий код:

-------------------------------------------------------------------------------------------

  body {

  background-color: #FFCC66;

  background-image: url("Smile.jpg ");

  background-repeat: repeat-у;

  background-attachment: fixed;

  background-position: right bottom;

  }

  h1 {

  color: #990000;

  background-color: #FC9804;

  }

-------------------------------------------------------------------------------------------