С помощью кода CSS можно контролировать фон элементов. Можно задать свойство цвета фона или свойство изображения фона, или даже оба одновременно, чтобы выбрать и цвет, и изображение:

body {
  background-color: red;
  background-image: url(pattern.png);
}

Также можно использовать SVG изображение как фон, встроенный в код CSS как закодированное изображение:

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

body {
  background-image:
    url(image-one.jpg),
    url(image-two.jpg);
}

Если воспользоваться записью выше, то image-one.jpg будет повторяться и полностью закроет собой image-two.jpg. Но можно контролировать положения изображений отдельно с помощью других свойств фона:

body {
  background-image:
    url(image-one.jpg),
    url(image-two.jpg);
  background-position:
    top right, /* Эта запись задает расположение первого изображения */
    bottom left; /* Эта запись задает расположение второго изображения */
  background-repeat:
    no-repeat; /* Эта запись применяется к обоим изображениям */
}

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

А вот пример использования четырех отдельных изображений в каждом углу, размещенных со смещением:

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

Несколько важных моментов:

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

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование таблиц стилей браузеров и значения CSS3 по умолчанию
• Различные методы для размещения объекта ровно по центру
• Создание необычных стилей для ссылок