Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство background для работы с фоном

Введение

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

Код CSS
background: значение1 значение 2 ... значениеN;    

Далее приведем реальный пример:

Код CSS
background: #000000 url("img.jpg") no-repeat left bottom;    

Рассмотрим специальные свойства:

  1. background-attachment
  2. background-blend-mode
  3. background-clip
  4. background-color
  5. background-image
  6. background-origin
  7. background-position
  8. background-repeat
  9. background-size

Свойство background-color для установки фонового цвета

Для обозначения фонового цвета элемента используется свойство background-color. По умолчанию все элементы имеют прозрачный фон. Рассмотрим синтаксис:

Код CSS
background-color: цвет | transparent;    

Значение transparent устанавливает прозрачный фон. Под понятием «цвет» может быть запись цвета в допустимом формате для CSS. Допустимыми форматами являются: шестнадцатеричный код, название цвета, RGB, RGBA, HSL, HSLA. Далее пример, где используется три формата записи черного цвета:

Код CSS
div {
background-color: #000;
}
div {
background-color: rgb(0, 0, 0);
}
div {
background-color: black;
}

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

Свойство background-image используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона, при помощи свойства background-color, то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

Код CSS
background-image: url|none;    

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

  1. url – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
  2. none – фоновое изображение не будет отображаться. Оно по умолчанию;
  3. linear-gradient() – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
  4. radial-gradient() – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
  5. repeating-linear-gradient() – повторяет линейный градиент;
  6. repeating-radial-gradient() – повторяет радиальный градиент.

Пример:

Код CSS
body {
background-image: url("bg.jpg");
}

Свойство background-attachment устанавливает прокрутку фона

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

Код CSS
background-attachment: fixed | local | scroll | initial | inherit;    

Как видно из вышеприведенного кода, данное свойство имеет пять значений. Что они означают:

  1. scroll – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
  2. fixed – фоновое изображение не будет прокручиваться вместе со страницей.
  3. local – фоновое изображение будет прокручиваться вместе с содержимым элемента.
  4. initial – устанавливается значение по умолчанию.
  5. inherit – наследует значение свойства родителя.
Код HTML
<div style = "height: 3000px">
Какой-то текста
</div>
Код CSS
body {
background-image: url("bg.png"); /* Путь к изображению, которое используется для фона*/
background-attachment: fixed; /* Фон прокручиваться не будет */
}

Свойство background-blend-mode определяет режим наложения фонового изображения

Определяет, как будет накладываться одно фоновое изображение, на другое или на фоновый цвет. То есть, первым задается какой-то фон, при помощи свойства background-image, вторым задается фоновое изображение, для которого мы определяем стиль наложения. Позволительно указывать несколько фоновых изображений, т.е. больше двух при помощи background-image и в background-blend-mode использовать ряд значений, перечисленных через запятую. Стоит обратить внимание на версии браузеров, с которых начинается поддержка свойства background-blend-mode, например, Internet Explorer не поддерживает его вовсе. Рассмотрим синтаксис:

Код CSS
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

Расшифруем все эти значения. Я не расписывал их, так как это достаточно сложно описать, поэтому каждое значение лучше рассмотреть экспериментальным путем, так будет понятнее.

  1. normal – Обычный. Режим по умолчанию.
  2. multiply – Умножение.
  3. screen – Осветление.
  4. overlay – Перекрытие.
  5. darken – Темнее.
  6. lighten – Светлее.
  7. color-dodge – Осветление основы.
  8. color-burn – Затемнение основы.
  9. hard-light – Направленный свет.
  10. soft-light – Рассеянный свет.
  11. difference – Разница.
  12. exclusion – Исключение.
  13. hue – Тон.
  14. saturation – Насыщенность.
  15. color – Цвет.
  16. luminosity – Яркость.

Далее пример использования свойства:

Код CSS
div { 
width: 500px;
height: 500px;
background-image: url("bg.jpg"), url("superimposed.png");
background-blend-mode: darken;
}

Свойство background-clip определяет отображение фона под границами

Фон может отображаться под границами, внутри их или внутри контента. Чтобы это реализовать, необходимо использовать свойство background-clip. Как ранее было обозначено, оно принимает три значения:

  1. border-box – фон будет отображаться под рамкой;
  2. padding-box – фон будет отображаться внутри рамки;
  3. content-box – фон будет отображаться внутри контента.

Синтаксис свойства background-clip:

Код CSS
background-clip: [border-box |padding-box | content-box];    

Далее рассмотрим наглядный пример использования свойства background-clip:

Код CSS
.clip {
background: #f1f1f1;
border: 20px dotted #000000;
background-clip: border-box;
padding: 10px;
height: 50px;
}

Свойство background-origin для позиционирования фона

С помощью свойства background-origin можно позиционировать фон, при этом свойство background-attachment не должно иметь значение fixed. Значения, которые принимает background-origin:

  1. border-box – позиционирование фона осуществляется относительно границы;
  2. padding-box – позиционирование фона осуществляется относительно края элемента, при чем толщина границы учитывается;
  3. content-box – позиционирование фона осуществляется относительно содержимого элемента;

Синтаксис свойства background-origin:

Код CSS
background-origin: [border-box |padding-box | content-box];    

Рассмотрим пример:

Код CSS
.origin {
background: url("img.jpg") no-repeat;
background-origin: content-box;
border: 10px solid #000;
padding: 10px;
height: 100px;
}

Свойство background-position для определения начального положения фона

С помощью свойства background-position достаточно просто устанавливается начальное положение фона. Это свойство имеет два значения, которые могут быть заданы ключевым словом, в процентах или в иных значениях допустимых в CSS. Первое значение определяет положение по горизонтали (left, center, right), второе – по вертикали (top, center, bottom). Через запятую можно указывать значения для нескольких фонов. Синтаксис свойства background-position следующий:

Код CSS
background-position: значение1 значение2;    

При указании одного ключевого слова, второе будет равно center. Комбинации ключевых слов могут быть следующими:

  1. left top
  2. left center
  3. left bottom
  4. right top
  5. right center
  6. right bottom
  7. center top
  8. center center
  9. center bottom

Рассмотрим пример:

Код CSS
body {
background-image: url(bg.jpg);
background-position: 50% 50%;
}

Свойство background-repeat устанавливает повторение фона

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

Код CSS
background-repeat: значение;    

Свойство background-repeat принимает 6 значений:

  1. repeat – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
  2. repeat-x – Фоновое изображение повторяется только по горизонтали;
  3. repeat-y – Фоновое изображение повторяется только по вертикали;
  4. no-repeat – Фоновое изображение не повторяется. Изображение будет показано только один раз;
  5. space – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
  6. round – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);

Рассмотрим пример:

Код CSS
body { 
background-image: url(bg.jpg);
background-repeat: repeat;
}

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство background-size. Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение auto. Синтаксис:

Код CSS
background-size: значение1 значение2;    

Значения могут задаваться в любых разрешенных в CSS единицах, процентах и ключевыми словами:

  1. cover – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
  2. contain – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
  3. auto – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

Рассмотрим пример:

Код CSS
div {
background: url(bg.jpg);
background-size: cover;
}

Заключение

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

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.