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

Свойство background-color

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

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

Вы можете сами посмотреть, как применяется это свойство с разными значениями цвета, причем не только красного.

Меняем цвет фона

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

Также вы можете подобрать цвет фона в системе rgb с помощью примера от  Dev Loop

See the Pen Change colors based on BG Contrast | Brain.js by Dev Loop (@dev_loop) on CodePen.18892

Свойство background-image

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

Для того чтобы убрать изображение необходимо использовать значение none:

Именно none является значением по умолчанию для свойства background-image, т.к. любой блок не имеет картинки, назначенной ему в качестве фона браузером.

Для фоновых изображений используют обычно файлы в формате JPG, PNG, SVG или GIF. Еще одним редко используемым форматом является APNG, т.е. Animated (анимированный) PNG, просто потому, что изображений в таком формате еще очень мало и они поддерживаются далеко не всеми браузерами (инфо на caniuse.com). Также в сети все больше появляется файлов в формате WEBP, предложенном Google в 2010 году и имеющем пока частичную поддержку браузерами (caniuse.com). Этот формат можно получить с помощью конвертера.

Посмотрите на примере на фоновые изображения в разных форматах:

Свойство background-repeat

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

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

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

Свойство background-position

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

Кстати, по умолчанию любая фоновая картинка "прилепится" к левому верхнему углу, т.е. начнется с точки начала координат браузера (для body) или элемента. Если же вы зададите только одно значение, то второе будет интерпретировано, как center. При указании одного значения в px, %, em и т.п., а не в виде ключевого слова, вы получите смещение по горизонтали на указанное количество единиц, а по вертикали изображение будет центрировано (применится значение center).

В примере вы можете посмотреть несколько вариантов размещения фонового изображения, для которого указано свойство background-repeat со значением no-repeat. Обратите внимание на то, что отрицательные и слишком большие значения сдвигают картинку за пределы ее контейнера.

Свойство background-attachment

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

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

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

В примере ниже можно посмотреть на 2 значения свойства background-attachment: scroll и fixed. Его имеет смысл открыть в новой вкладке:

В примере ниже вы можете посмотреть на разницу между значением background-attachment: local и scroll lдля элементов с внутренней прокруткой (для них обычно указывают свойство overflow: auto или scroll):

Свойство 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). Кроме того, некоторые версии браузеров, например, Safari 3.1-6.1? не поддерживают это свойство в составном свойстве 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-size вы можете посмотреть в примере ниже. Обратите внимание, что внешне значения cover и 100% auto, а также contain и auto 100% совпадают.

Свойство background-origin

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

Варианты значений свойства background-origin:

В каком-то смысле это свойство напоминает box-sizing для элемента (значения похожи), но с точки зрения фона. Оно определяет, будет ли фоновый рисунок занимать пространство внутри элемента вместе с его внутренними отступами (padding-box), или с внутренними отступами и рамками (border-box), или только область контента без отступов и рамок (content-box).

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

Свойство background-clip

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

Варианты значений свойства:

Первые 3 значения свойства background-clip подобны по внешнему виду работе свойства background-origin. А последнее значение -  text позволяет сделать текст-маску, если пользоваться терминами Adobe Photoshop, т.е. как бы «вырезать» текст из фоновой картинки. Для этого необходимо к остальным стилям добавить свойство color: transparent. Кроме того, для браузеров на основе Chrome (Opera, Safari, Yandex-браузер), необходимо еще добавить свойство с вендорным префиксом -webkit-background-clip: text.

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

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

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

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

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

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

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

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

Различные сочетания свойств группы background вы найдете в примере ниже. По умолчанию выделен тот пункт, который указан в css-свойствах для блока.

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

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

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

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

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

Пример:

 

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


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

Автор: Админ

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

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

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

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

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

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

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

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

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