Background в CSS3

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

В этой статье я хочу рассмотреть свойства background, которые станут доступны с введением стандарта CSS3.

Изменение: Вставка нескольких фонов

В CCS3 стало возможным вставлять несколько фоновых изображений. Синтаксис такой же, как и в CCS2, однако изображения нужно разделять запятой. Изображение, указанное первым, будет самым верхним. Остальные слоями ложатся под предыдущие. Естественно, вы можете пользоваться свойством background-position.

Новое свойство: background-origin

Это свойство определяет границу, от которой будет вестись отсчет для background-position.

Значения:

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

Браузеры на движках Gecko (напр. Mozilla Firefox) и Webkit (Safari) используют устаревшую версию спецификации, поэтому значения свойства в них имеют вид, соответственно, border, padding и content.

Если Вы хотите уже сейчас использовать данное свойство в Mozilla Firefox или Safari, то указывайте название свойства:

background-origin
Свойство background-clip позволяет ограничить область заливки фоном. Рассмотрим варианты его применения.

Значения:

  • border-box (по-умолчанию) — фон размещается под блоком, включая границу блока;
  • padding-box — фон ограничен внутренним отступом;
  • content-box — фон ограничен содержимым;
  • no-clip — то же самое, что и border-box.

Браузеры на движках Gecko (напр. Mozilla Firefox) и Webkit (Safari) используют устаревшую версию спецификации, поэтому значения свойства в них имеют вид, соответственно, border, padding и content.

Если Вы хотите уже сейчас использовать данное свойство в Mozilla Firefox или Safari, то указывайте название свойства:

background-clip

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

Новое свойство: background-size

Это свойство позволяет изменить размер исходного фонового изображения.

Значения:

  • contain — размер изображения будет уменьшен по размеру блока, соотношение сторон изображения сохранится;
  • cover — размер изображения будет увеличен по размеру блока, соотношение сторон изображения сохранится;
  • <значение>px <значение>px — размер фона изменится согласно указанным значениям ширины и высоты, используются стандартные ед. изм.;
  • <значение>% <значение>% — размер фона изменится согласно указанным значениям ширины и высоты, значение процентов будет рассчитано относительно размеров блока.
  • auto (по-умолчанию) — принимается исходный размер изображения, либо, если указано для какой-то одной из сторон, вычисляется относительно размера второй стороны и соотношения сторон (ratio).

Негативные значения невозможны. Возможно значение 0 (ноль), однако тогда изображение показано не будет, и примет значение «transparent».

Новое свойство: background-break

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

Значения:

  • bounding-box — блоки будут объединены в прямоугольную область с общей областью позиционирования и заполнения фоном;
  • each-box — заполнение фоном будет выполнено индивидуально для каждого блока;
  • continuous (по-умолчанию) — заполнение фоном будет выполнено так, как будто между блоками нет разрыва.

Изменение: background-color

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

Изменение: background-repeat

Обычно в CSS2 повторяющаяся фоновая картинка, доходя до края элемента, обрезается. В CSS3 добавлено два новых значения, которые позволяют убрать этот дефект.

Значения:

  • space — фоновое изображение будет размещено по элементу и равномерно заполнено пустым пространством;
  • round — фоновое изображение будет уменьшено, чтобы поместиться в объем элемента.

background-repeat: space;

Изменения: background-attachment

Для свойства background-attachment добавилось новое значение local. C этим свойством, в случае если для элемента установлено overflow: scroll, фоновая картинка также будет прокручиваться.

Эта статья начинает цикл о нововведениях, которые ждут нас с введением CSS3. Буду рад ответить на ваши вопросы в комментариях.

Подписывайтесь на RSS и следите за обновлениями.

  • Гениально, я даже не подозревал насколько продвинулся CSS! Надо постигать эту науку — хотя в жизни пользуешься дизайнами попроще.

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

    • Сейчас еще больше браузеров поддерживает CSS3 — на днях к Mozilla Firefox и Safari присоединился Chrome 3

  • Но IE все еще сопротивляется прогрессу.

  • IE всегда сопротивляется прогрессу!..

  • HTML {
    background: url(….) no-repeat left bottom fixed;
    }

    BODY {
    background: url(…..) no-repeat right top fixed;
    }

    так все браузеры поймут.