CSS Background - Color, Image, Position и другие свойства для работы с фоном

Свойство CSS background

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

#container {
  background:
    url('/image.png')       /* background-image */
    top center / contain    /* background-position / background-size */
    no-repeat               /* background-repeat */
    fixed                   /* background-attachment */
    padding-box             /* background-origin */
    content-box             /* background-clip */
    green                   /* background-color */
}

Обратите внимание, что background-size нужно указывать через слэш (/) сразу после background-position.

Такое написание, конечно, экономит много времени, но я так не делаю. Почему?

1. Код хуже читается. Особенно если свойства указаны в случайном порядке

#element-1 { background: no-repeat center/80% url('image-1.png'); }
#element-2 { background: url('image-2.png') top left repeat content-box; }
#element-3 { background: linear-gradient(#e66465, #9198e5); }

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

article {
  background-color: red;
  background: url('image.png') no-repeat top left;
}

В приведенном выше примере изначально заданное свойство background-color: red переопределяется на transparent, т.к. цвет фона не задан в свойстве background и используется дефолтное значение. Я в такое раньше часто и подолгу тупил, не понимая, в чем ошибка, и в какой-то момент решил для себя, что гораздо эффективнее / удобнее / эстетичнее указывать отдельные свойства отдельно, простите за тавтологию.

Итак, помимо универсального свойства background, в CSS есть 8 свойств для работы с фоном элемента:

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

Свойство CSS background-image

Это свойство используется для того, чтобы задать в качестве фона изображение (.png, .jpg, .gif, .svg) или градиент (по сути также являющийся изображением, которое генерирует браузер).

body {
  background-image: url('body-bg.png');
}

В качестве значения url() указывается путь к файлу изображения или data URI (изображение, закодированное в base64). Кавычки можно использовать как одинарные, так и двойные, а можно и вообще не использовать. В данном случае это дело вкуса.

Для того, чтобы задать в качестве фонового изображения градиент (постепенный переход от одного цвета к другому) используются CSS-функции linear-gradient() и radial-gradient().

.linear-gradient {
  background-image: linear-gradient(black, white);
}

.radial-gradient {
  background-image: radial-gradient(#000, #fff);
}

linear-gradient() создает переход между цветами как бы вдоль прямой линии (например, слева направо, сверху вниз, из левого нижнего угла в правый верхний и т.д.).

radial-gradient() создает переход от центра к периферии.

В одном из ближайших постов я обязательно расскажу все, что знаю про градиенты в CSS. Даю слово!

Свойство CSS background-position

При помощи этого свойства в CSS можно задавать положение фонового изображения или градиента относительно границ элемента.

.absolute {
  background-position: 10px 30px;
}

.relative {
  background-position: 5% 25%;
}

Значения могут быть либо абсолютными (px, em или другие единицы), либо относительными (%). При этом сначала указывается значение по горизонтали, а потом по вертикали.

Если с абсолютными значениями все просто (так сказать, как слышится, так и пишется), то с относительными немного сложнее. Значение background-position: 10% 20% означает, что точка, находящаяся на 10% правее левого края изображения будет находиться на 10% правее левого края элемента, а точка, находящаяся на 20% ниже верхнего края изображения будет находиться на 20% ниже верхнего края элемента.

Кроме того, в качестве значений background-position можно использовать ключевые слова (top, bottom, left, right, center). В этом случае порядок не имеет значения.

Дефолтное значение background-position - 0 0, т.е. изображение находится в левом верхнем углу элемента.

.keyword {
  background-position: bottom right;
}

Свойство CSS background-size

Свойство background-size определяет размер (масштаб) фонового изображения или градиента. В качестве значений можно использовать либо ключевые слова (auto (дефолтное значение), cover, contain), либо относительные (%) или абсолютные (px) величины.

.cover { background-size: cover; }

.relative { background-size: 200%; }

.absolute { background-size: 240px 120px; }

Если используются ключевые слова: 

• background-size: cover означает, что фоновая картинка должна покрывать всю площадь элемента, даже если для этого ее нужно растянуть или обрезать по одному краю.
• background-size: contain означает, что фоновая картинка должна полностью поместиться в размеры элемента, даже если часть его площади будет не покрыта ей.
• background-size: auto означает, что размер изображения будет рассчитан браузером в зависимости от его размера и соотношения сторон.

Если background-size задается в процентах или пикселях, можно указывать одно значение (например, background-size: 80%) или два (например, background-size: 200px 400px). В первом случае, задается ширина изображения, а высота рассчитывается автоматически. Во втором задаются ширина и высота соответственно.

Свойство CSS background-repeat

Это свойство определяет нужно ли повторять фоновое изображение (если, конечно, оно задано) и как это делать.

.no-repeat {
  background-repeat: no-repeat;
}

.repeat {
  background-repeat: repeat-x;
}

В качестве значений background-repeat принимает следующие ключевые слова:

• inherit - наследуется значение родительского элемента
• repeat - картинка повторяется как по вертикали, так и по горизонтали
• repeat-x - картинка повторяется по горизонтали
• repeat-y - картинка повторяется по вертикали
• no-repeat - картинка выводится один раз и не повторяется
• space - картинка повторяется по горизонтали и вертикали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они равномерно распределяются
• round - картинка повторяется по вертикали и горизонтали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они растягиваются или сжимаются

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

Свойство CSS background-attachment

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

• scroll - значение по умолчанию, картинка зафиксирована в пределах элемента, который движется во время скролла вьюпорта (надеюсь, эврисинг понятно ;)
• fixed - картинка зафиксирована в пределах вьюпорта, даже не смотря на то, что элемент, в котором она находится, движется при скролле
• local - картинка скроллится внутри элемента.

Осознаю, что сказанное выше похоже на кашу из слов, но я старался как мог. Проще всего проиллюстрировать свойство background-attachment на примерах.

Попробуйте поскроллить весь пример и отдельные его элементы.

Свойство CSS background-origin

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

• border-box - в область позиционирования изображения включены границы элемента (border)
• padding-box - в область позиционирования изображения включены поля отступа (padding) элемента.
• content-box - границы области позиционирования изображения совпадают с границами контента элемента (до padding)

Опять же, все гораздо понятнее на примерах.

Свойство CSS background-clip

Это свойство указывает, насколько фон выступает за пределы области контента. Это свойство похоже по своей функции на background-origin, но в отличие от него не изменяет размер фона, а обрезает его края. Кроме того, свойство background-clip влияет не только на фоновое изображение (background-image), но и на заливку (background-color).

В качестве значений используются следующие ключевые слова:

• border-box (значение по умолчанию) - фон выступает до внешнего края границы (border) элемента.
• padding-box - фон выступает до внешнего края поля отступа (padding) элемента.
• content-box - фон не выступает за пределы области контента элемента.

Сравните свойства CSS background-clip и background-origin на примерах.

Свойство CSS background-color

Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:

HEX или HEX с альфа-каналом

НЕХ (hexadecimal) - обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два - зеленую, а два последних - синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв - это шестнадцатеричное число.

Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 - полностью прозрачный, ff - полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.

.color.hex {
  background-color: #9C27B0;
}

.color.hex-alpha {
  background-color: #9C27B033;
}

RGB или RGBa

Цвет можно задать при помощи функций CSS rgb() и rgba(). Синтаксис предельно простой - значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции rgba() указывается четвертый параметр - прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).

.color.rgb {
  background-color: rgb(0, 200, 81);
}

.color.rgba.red {
  background-color: rgba(255, 0, 0, .5);
}

.color.rgba.green {
  background-color: rgba(0, 255, 0, 70%);
}

HSL или HSLa

HSL - расшифровывается как Hue - тон, Saturation - насыщенность и Lightness - светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате -hsl() и hsla(). В качестве аргументов обеих по порядку указываются:

• hue - расположение тона на цветовом колесе (от 0 до 360)
• saturation - насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% - серый, а 100% - полный цвет.
• lightness - светлота или яркость, где 0% - максимально темный (черный), 50% - нормальный, 100% - максимально светлый (белый)
• alpha (только для hsla()) - прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 - полностью прозрачный, 100% или 1 - полностью непрозрачный).

.color.hsl {
  background-color: hsl(0, 80%, 50%);
}

.color.hsla {
  background-color: hsl(0, 80%, 50%, 28%);
}

HTML-цвета

Цвет фона элемента можно задать при помощи его названия на английском языке. Всего 147 вариаций от банальных black и white до экзотических, типа PaleGoldenrod или CornflowerBlue. Названия указываются в одно слово без пробелов. Регистр не учитывается.

.color.magenta {
  background-color: magenta;
}

.color.green {
  background-color: MediumSpringGreen;
}

Ключевые слова

Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:

• initial - устанавливает в качестве цвета фона дефолтное значение, т.е. transparent
• inherit - задает цвет фона как у родительского элемента
• transparent - делает фон элемента прозрачным
• currentColor - переменная, значение которой соответствует значению свойства color текущего элемента, а если оно не задано, используется color родительского элемента.

.color.current {
  color: red;
  background-color: currentColor;
}

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