Вы здесь: Главная » CSS » Управление фоном элемента. Свойства группы background

Управление фоном элемента. Свойства группы background

Для того чтобы страница сайта была красивой, с ней, как правило, необходимо поработать с точки зрения оформления фона. Для управления фоном на html-странице существует достаточно приличное количество свойств, о которых мы сейчас и поговорим.

Свойство background-color

Каждый элемент на странице может иметь фоновый цвет. Чаще его назначают для блочных элементов, но также он применим и к блочно-строчным, например, к ссылкам со значением свойства display: inline-block, и реже -  к строчным элементам, которые нужно выделить на странице цветом:

Для указания цвета может быть использовано 16-ричное значение в виде 3-х или 6 цифр, rgb(), rgba() или название цвета:

Также используется значение none (чтобы убрать изображение) или transparent (для прозрачного фона). Кстати именно transparent является значением по умолчанию для всех элементов.

Свойство background-image

Для вставки фонового изображения используйте правило background-image:

Чтобы управлять "распространением" (или клонированием) изображения, можно использовать свойство background-repeat. Оно может замостить изображением-текстурой всю облаcть элемента-контейнера (значение repeat), повторяться только по горизонтали (repeat-x) или по вертикали (repeat-y), а также задавать одну не повторяющуюся фоновую картинку (значение no-repeat). Также в CSS3.0 появились новые значения round и space:

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

Свойство background-position

Также вы можете указать браузеру место, в котором будет расположено изображение. Для этого есть свойство background-position со значениями в виде ключевых слов (left, center, right - по горизонтали, или координате по X, top, center, bottom - для вертикали, или координате по Y), в виде единиц измерения, обычно используемых в css (px, em, ex, pt), или в процентах (%). Но, если вы задаете свойство в %, то должны понимать, что проценты берутся от ширины или высоты того элемента, для которого указывается это свойство. Кроме того, значения в виде ключевых слов и в виде процентов имеют  следующую аналогию:

Кстати, по умолчанию любая фоновая картинка "прилепится" к левому верхнему углу, т.е. начнется с точки начала координат браузера (для body) или элемента.

Свойство background-attachment

Вы, скорее всего, видели, что, как правило, фон двигается за элементом. За это отвечает свойство background-attachment: scroll. Но его можно изменить на значение fixed, и тогда фон "зафиксируется", а контент, т.е. содержимое вашей странички будет прокручиваться как бы поверх фона.

Еще свойство background-attachment имеет значение local - для элементов с полосой прокрутки фон в них будет прокручиваться локально.

Обратите внимание на значение inherit - оно характерно для большинства свойств css и обозначает, что данное свойство наследуется от родительского элемента. Не поддерживается Internet Explorer версии 7.

Составное свойство background

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

Записывается так:

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

Например, можно указать только цвет фона, используя это свойство:

И все - цвет фона будет серым.

Или записать в нем только путь к  фоновому изображению:

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

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

И - вау - ничего не работает!!! А почему? Да потому, что свойство указано, как background-image, а затем превращено в  background. Но браузер-то видит запись background-image!!! И не понимает, почему там так много ненужных слов.

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

Еще одна возможная ошибка заключается в том, что сначала записывается цвет фона, а затем добавляется составное свойство с перечислением всех нюансов размещения картинки, но БЕЗ указания цвета. И в итоге браузер заменяет его на значение по умолчанию, т.е. transparent (прозрачный цвет).

Пример:

Свойство background-size

Если все, что перечислялось ранее, имеет отношение к спецификации CSS2.1,  то это свойство - из раздела относительно новых, т.е. стандарта CSS3.0. А это значит, что часть браузеров может не поддерживать вообще это свойство (IE 6-8, например), поддерживать с применением вендорных префиксов (-webkit-background-size для браузеров на Android версии 2, -moz-background-size для Mozilla Firefox версии 3.6, -o-background-size - для Opera до версии 10.53). Кроме того, многие браузеры не поддерживают это свойство в составном свойстве background, поэтому его лучше указывать отдельной строкой. Подробнее - на сайте caniuse.com.

Итак, значения:

По умолчанию свойство имеет значение auto, т.е. изображение будет иметь свой реальный размер, например, 200x200px. Но, вы можете задать background-size: 100% 100% - и тогда оно растянется на всю ширину и высоту элемента. Если у элемента ширина 300px, а высота 500px - как думаете - это будет красиво? Попробуйте сами.

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

И по вертикали изображение будет пересчитано автоматически.

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

То же касается и размеров в px, em, cm.

Ключевые слова cover и contain говорят, что изображение будет подогнано под размер элемента, но cover масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока , а contain - будет масштабировать изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Кстати, это свойство не наследуется, у него нет значения inherit.

Видеоурок по использованию правил группы background


Скачать материалы к видеоуроку можно по ссылке.

6 комментариев

  1. А как сделать так, чтобы контент прокручивался поверх фона, как на многих современных сайтах?

    • Необходимо для того блока, в котором у вас будет находится изображение, задать background-attachment: fixed. Например, так:
      .bg {
      background: url(images/bg.png) no-repeat center;
      background-attachment: fixed;
      }

  2. Спасибо. Интересная статья

  3. Спасибо за статью

  4. Хороший видеоурок.
    Теперь понятно, как делать прокручиваемые фоны.
    Т.е. фиксированные фоны, а прокручиваемый контент.

  5. Спасибо за видеоурок! У меня все получилось!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *