Настройка фона
Фоновые изображения
Установить фоновое изображение можно с помощью свойства background-image.
Пример:
background-image: url(bg.jpg);
Работа с фоном в CSS
Свойство background-repeat может принимать следующие возможные значения:
1. repeat - фоновое изображение повторяется по горизонтали и вертикали;
2. no-repeat - не повторять фоновое изображение;
3. repeat-x - фоновый рисунок повторяется только по горизонтали;
4. repeat-y - фоновый рисунок повторяется только по вертикали.
Background-size масштабирует фоновое изображение согласно заданным размерам. Порядок следования значений - background-size: ширина высота (в пикселях или процентах). Если задать значение только для одной стороны картинки, то размер второй стороны вычисляется автоматически исходя из пропорций картинки.
Пример:
background-size: 100px 100px;
Вместо числовых значений можно использовать ключевые слова:
- cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока;
- contain - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Background-position задает начальное положение фонового изображения, установленного с помощью свойства background-image.
Порядок следования значений
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom).
Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах.
Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
Пример:
background-position: right bottom;
Фоновые паттерны
Сервисы для создания фоновых паттернов своими руками:
- http://patternico.com/emoji/ - позволяет создать паттерн из Emoji;
- http://patternico.com/ - позволяет создать паттерны из иконок.