Название

Делаем картинку в качестве фона с помощью CSS. Свойство background.

Кроме того, что с помощью свойства background можно задавать фоновый цвет элемента, с помощью этого свойства можно также задавать элементам в качестве фона изображение.

Давайте рассмотрим, как это можно делать.

Синтаксис здесь следующий:

background: url(путь к фоновому изображению);

Путь к изображению может быть как абсолютным, так и относительным.

Небольшой пример, на котором можно посмотреть, как это работает:

<div style="width:300px; height:300px; background:url('//webgyry.info/images/html0.png');"></div>

Имеем блок div у которого в качестве фонового изображения указывается изображение с моего сайта.

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

Фоновое изображение можно повторять по оси X или оси Y, либо по обоим осям. Как правило, этот эффект используют для того, чтобы построить фоновое изображение для сайта из какой-либо структуры. Если эту структуру повторять, то получается довольно интересные узоры.

Итак, для повтора изображения свойство background будет выглядеть вот так:

Для повтора по оси Х:

background: url(путь к фоновому изображению) repeat-x;
<div style="width:300px; height:300px; background:url('//webgyry.info/images/1327364507_Lock-mini.png') repeat-x;"></div>

Для повтора по оси Y:

background: url(путь к фоновому изображению) repeat-y;
<div style="width:300px; height:300px; background:url('//webgyry.info/images/1327364507_Lock-mini.png') repeat-y;"></div>

Для повтора по оси X и Y:

background: url(путь к фоновому изображению) repeat;
<div style="width:300px; height:300px; background:url('//webgyry.info/images/1327364507_Lock-mini.png') repeat;"></div>


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

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

background: url(путь к фоновому изображению) repeat #ccc;
<div style="width:300px; height:300px; background:url('//webgyry.info/images/1327507_Lock-mini.png') repeat #ccc;"></div>

Это основные техники для работы с фоновым изображением элементов с помощью свойства CSS background. Пользоваться фоновыми изображениями приходится довольно часто, поэтому если вам что-то не понятно, спрашивайте.

Назад Далее