Фоновая картинка

В качестве фона можно использовать любое подходящее для этого изображение в формате GIF, JPEG, PNG и даже SVG. Правильно подобранный фон не отвлекает внимание от текста, хорошо сочетается с цветовой гаммой веб-страницы, при этом файл с фоном желательно должен быть небольшим по объёму, чтобы быстро загружаться.

Свойство background

Универсальное свойство background позволяет задать одновременно цвет фона, фоновое изображение, устанавливает положение рисунка, указывает, фиксировать фон или нет, а также определяет, как будет повторяться изображение. Так, если требуется поместить фоновую картинку в правый верхний угол без дублирования, как показано на рис. 1, следует воспользоваться кодом, приведённым в примере 1.

Рис. 1. Вид страницы с фоновым рисунком

Пример 1. Добавление фонового рисунка

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

Повторение фона

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

• no-repeat — фон не повторяется; применяется для простого добавления единственной картинки;
• repeat-x — фон повторяется по горизонтали;
• repeat-y — фон повторяется по вертикали.

Рассмотрим вертикальный бесшовный фон — при повторении картинки по вертикали между отдельными фрагментами не заметно стыков и фоновый рисунок выглядит цельным. Предварительно следует подготовить фоновое изображение, которое должно удовлетворять ряду условий:

• занимать по высоте не меньше 20–30 пикселей;
• при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пикселя), то при отображении фона эффект его появления будет виден невооружённым глазом. Увеличение высоты позволяет замостить фон элемента быстро и незаметно.

В качестве образца фона возьмём узор, показанный на рис. 2.

Рис. 2. Фоновая картинка

В примере 2 показано добавление фона на веб-странице с повторением его по вертикали. Чтобы текст не выводился поверх рисунка к селектору body добавлено поле слева.

Пример 2. Повторение фона по вертикали

Результат данного примера показан на рис. 3.

Рис. 3. Вид фона, повторяющегося по вертикали

Аналогично делается и повторение по горизонтали. Предварительно готовим подходящее изображение, затем добавляем его фоном к элементу через background и включаем повторение repeat-x (пример 3).

Пример 3. Повторение фона по горизонтали

Результат данного примера показан на рис. 4.

Рис. 4. Вид фона, повторяющегося по горизонтали

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

• top left = left top = 0% 0% (в левом верхнем углу);
• top = top center = center top = 50% 0% (по центру вверху);
• right top = top right = 100% 0% (в правом верхнем углу);
• left = left center = center left = 0% 50% (по левому краю и по центру);
• center = center center = 50% 50% (по центру);
• right = right center = center right = 100% 50% (по правому краю и по центру);
• bottom left = left bottom = 0% 100% (в левом нижнем углу);
• bottom = bottom center = center bottom = 50% 100% (по центру внизу);
• bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body, то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.