Фоновое изображение

Продолжим изучение CSS. В данном уроке css мы пройдем одну из важных тем - тему изучения работы с фоном через CSS. Это может быть фон всего документа (всей html-страницы) или фон какой нибудь таблицы то есть все, что связано с фоном через css мы сейчас и рассмотрим.

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

Как мы уже знаем - все содержимое документа находится в теге <body>, соответственно, чтобы задать фон всему документу нам необходимо переопределить тег <body> (задать ему фоновый цвет).

Фоновый цвет задается свойством background-color и прописываем значение цвета.


Пример:


body {

background-color:#f2f2f2;

}

Фон всей html-страницы стал серым. Названия и код некоторых цветов можно видеть в таблице:

 

Название и код цвета

Цвет Название Код цвета Цвет Название Код цвета
Белый white ffffff Розовый fuchsia ff00ff
Бирюзовый agua 00ffff Светло-серый silver c0c0c0
Голубой teal 008080 Синий blue 0000ff
Желтый yellow ffff00 Сиреневый purple 800080
Зеленый lime 00ff00 Темно-зеленый green 008000
Красный red ff0000 Темно-серый gray 808080
Малиновый maroon 800000 Темно-синий havy 000080
Оливковый olive 808000 Черный black 000000

 

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


Пример:

body {

background-image:url(имя файла);

}

Если файл изображения находится в той же папке, что и таблица стилей, то в круглых скобках прописываем только имя файла, который мы выбрали для фона. И так же заметьте, что размер нашего фонового изображения может быть 100×100px, а замостить фоном мы можем всю страницу, какой бы большой она ни была.

Если, после установки фона, плохо виден текст страницы необходимо подкорректировать цвет текста.

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

Происходит это следующим образом: по умолчанию браузер начинает заполнять страницу изображением с левого верхнего угла и движется до правого края (заполняя первый верхний ряд).

Затем заполняет первый вертикальный ряд сверху до нижнего края. Затем второй горизонтальный ряд, далее второй вертикальный - и так пока не дойдет до правого нижнего угла. И все это, конечно, мгновенно.

Если рисунок однообразный (какая нибудь текстура), то разбиения фона на квадратики видно не будет. В противном случае - в фоне страницы будут заметны повторяющиеся изображения нашего файла.

Теперь давайте заполним фон картинкой не с текстурным изображением, а с каким нибудь конкретным рисунком. Файл берем небольших размеров.

Пример:

body {

background-image:url(имя файла 2);

}


Фон нашей страницы - повторяющееся изображение нашей картинки.

Так же мы можем сами решать как нам разместить на странице наше фоновое изображение. В этом нам поможет свойство, отвечающее за тиражирование фонового изображения - background-repeat (повторение фона).

Значения, которые может принимать это свойство:

repeat-x - повторять фоновое изображение только по оси X

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

no-repeat - вообще не повторять

Сделаем наше изображение по оси Y:

Пример:

body {

background-image:url(имя файла 2);

background-repeat:repeat-y;

}

Наше изображение повторяется только по оси Y (по левому краю страницы).

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

Что бы браузер начал тиражирование изображения с верхнего правого угла применяем свойство background-position с указанием двух параметров: top - сверху, right - справа.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:repeat-y;

background-position:top right;

}

Браузер замостил фоновым изображением только правый край страницы.

Теперь давайте уберем тиражирование фонового изображения, оставив один рисунок в правом верхнем углу страницы.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:top right;

}

У нас осталось одно изображение, которое расположено в правом верхнем углу страницы.

Рассмотрим еще одно свойство, используемое при работе с фоном. Если применить прокрутку страницы, мы заметим, что фоновое изображение закреплено на странице и движется при прокручивании.

Используя свойство background-attachment с параметром fixed наше фоновое изображение при прокручивании страницы будет оставаться на месте.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:top right;

background-attachment:fixed;

}

Фоновое изображение теперь зафиксировано в правом верхнем углу браузера (не страницы).

Так же мы можем наше фоновое изображение разместить в любом месте, используя свойство background-position. В значении свойства прописываем в пикселях расстояние от левого края браузера до изображения и от верхнего края браузера до изображения.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:400px 200px;

background-attachment:fixed;

}

Если убрать свойство background-attachment:fixed;, то фоновое изображение будет закреплено на странице (при прокручивании страницы будет перемещаться вместе со страницей).

Умение применять эти свойства, будет вам очень полезно при создании своих сайтов.

Некоторые пользователи отключают загрузку картинок в своем браузере для ускорения загрузки web-страниц. Если в качестве фона вы используете какое то изображение, то такие пользователи вместо картинки увидят белый фон. Так что выбор за вами, что применить в качестве фона страницы: картинку или фоновый цвет.