Доброго времени суток, постоянные читатели моего обучающего блога и гости сайта. Сегодняшняя публикация посвящена важному элементу, без которого ваш веб-сервис будет выглядеть сухо, блекло и даже может оттолкнуть пользователей. Я расскажу, как управлять таким объектом, как фоновая картинка css.
После прочтения статьи вы с легкостью будете оперировать различными параметрами форматирования внешнего вида фонового изображения, узнаете, как создавать множественные фоны, фиксировать и центрировать картинки. Не буду вас томить долгими описаниями, поэтому приступим!
Его высочество background
Для того чтобы растягивать, форматировать и всячески видоизменять фоновое изображение, нужно знать лишь одно универсальное свойство – background. С его помощью можно указывать сразу несколько характеристик рисунка: определять цвет и/или фоновое изображение, устанавливать размер, способ позиционирования, скролирование, повторение и т.д.
Все это можно указывать как в выше названом свойстве, так и в конкретных элементах css. Ниже я описал отдельные элементы, редактирующие задний фон, и структурировал их в таблицу.
| Свойство | Назначение |
| background-image | Определяет картинку фона. Может существовать вместе с указанием фонового цвета. Последний будет виден пользователю в 3 случаях:
· Пока изображение грузится; · Если рисунок недоступен для просмотра; · Если на картинке имеются прозрачные области. Можно устанавливать путь к графическому файлу, очищать значение (none) или наследовать от предка (inherit). В спецификации css3 появилась возможность перечисления нескольких фоновых изображений. К этому дополнению я вернусь чуть позже. |
| background-attachment | Отвечает за скролирование объекта. Может быть прокручиваемым вместе с контентом (scroll), фиксированным (fixed) или наследоваться от родителя (любимое слово inherit). |
| background-clip | Указывает способ отображения краев графического файла под границами (чтоб увидеть разницу используете пунктирные border-ы или прозрачные).
Можно установить 3 параметра: 1. content-box – фон расположен только внутри текста или другого вида контента 2. padding-box – фон виден внутри рамки 3. border-box выводит фон под border-ом. |
| background-color | Устанавливает фоновый цвет. |
| background-position | Отвечает за расположение картинки заднего фона по вертикали (top, center, bottom) и по горизонтали (left, center, right). Также можно указывать расположение в единицах измерения (px, %, em и т.д.). Иногда используются отдельные свойства для определения вертикального (background-position-y) или горизонтального (background-position-x) позиционирования. |
| background-repeat | Задает повторяющееся отображение фоновых картинок. Повторы могут осуществляться по горизонтали (repeat-x), вертикали (repeat-y), по двум направлениям (repeat), не дублироваться (no-repeat). В css3 можно устанавливать одновременно 2 значения, а также использовать space – видимая область заполняется дубликатами рисунка и round – картинка повторяется целое число раз. |
| background-size | Определяет размер изображения. Спецификация css3 предусматривает 2 новых ключевых свойства:
· cover – растягивает фон на весь экран, сохраняя пропорции · contain – масштабирует фоновый рисунок так, чтобы он заполнил блок. |
| background-origin | Работает только в случае, если изображение скролируется. Поддерживает определение сразу нескольких значений. Указывает способ позиционирования объектов. Использует такие ключевые слова:
· content-box – изображение выводится с самой верхней левой точки контента · padding-box – название говорит само за себя: позиционирование происходит относительно внутренней границы · border-box – объект располагается, начиная с линии border. |
Множественные фоновые изображения
Я знаю, что многим не терпится увидеть программную реализацию теоретического материала, но подождите еще немного. Для начала я хочу рассказать и об этой технологии, а потом приведу пример с использованием большинства описанных свойств.
Итак, что же такое множественные фоны? Это прекрасная возможность отображать в окне браузера сразу несколько изображений в виде фона. Такой прием может пригодиться:
- Для ускорения загрузки веб-страниц, ведь маленькие изображения грузятся быстрее тяжелых графических документов;
- Для определения разных слоев для сайта;
- Для создания комплексного фона, собранного из разных частей и т.д.
С появлением css3 реализация такой технологии значительно упростилась, так как в backgroung- image можно прописать сразу несколько путей к изображениям.
Вот теперь пришел звездный час практической части. После запуска ниже прикрепленного примера на экране отобразится самолет, который летит по небу. Подчеркну, что самолет – это изображение с прозрачным фоном, а небо – это фоновая картинка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваемый фон</title>
<style>
body {
background-image: url(https://img-fotki.yandex.ru/get/5642/16969765.110/0_704d0_8e3d9602_orig.png), url(https://luxfon.com/images/201203/luxfon.com_5408.jpg);
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
background-size: 30%, cover;
background-attachment: fixed, fixed;
}
</style>
</head>
<body>
</body>
</html> |
Аналогично будет выглядеть и следующая реализация поставленной задачи:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваемый фон</title>
<style>
body {
background: url(https://img-fotki.yandex.ru/get/5642/16969765.110/0_704d0_8e3d9602_orig.png) center center no-repeat fixed,
url(https://luxfon.com/images/201203/luxfon.com_5408.jpg) center center no-repeat fixed;
background-size: 30%, cover;
}
</style>
</head>
<body>
</body>
</html> |
Ну вот я объяснил вам основные механизмы управления рисунками заднего фона. Некоторые могут подумать: «А где же описание адаптивных изображений?». Это правильный вопрос и тянет на отдельную статью, которая, кстати, выйдет очень скоро.
А пока настало время прощаться. Надеюсь публикация вам понравилась. Буду рад новым подписчикам! Пока-пока!
С уважением, Роман Чуешов
