Карта сайта

Урок 27: Фоновые изображения в CSS

/Уроки по HTML/CSS/Урок 27: Фоновые изображения в CSS
Урок 27: Фоновые изображения в CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

В 27-м уроке мы погрузимся в увлекательный мир фоновых изображений в CSS. Это один из ключевых инструментов для создания визуально привлекательных и современных сайтов. Готовы научиться управлять фонами как профессионалы? Тогда начнем.

Зачем нужны фоновые изображения?

Фоновые изображения это основа дизайна любой веб-страницы. Они помогают:

  • Создавать уникальные текстуры (например, дерево, градиенты, узоры).
  • Добавлять крупные баннеры или иллюстрации.
  • Улучшать читаемость текста за счет контрастных подложек.
  • Реализовывать сложные анимации и эффекты.

Без умения работать с background-image ваш сайт рискует остаться «сухим» и шаблонным. Давайте это исправим!

Свойство background-image

Это свойство позволяет задать изображение в качестве фона для любого HTML-элемента от <div> до <body>.

.element {
  background-image: url("путь-к-изображению.jpg");
}

Особенности:

  • Поддерживаемые форматы: JPEG, PNG, SVG, GIF (включая анимированные), WebP.
  • Относительные и абсолютные пути: Можно использовать ссылки на внешние изображения (но это не рекомендуется из-за скорости загрузки).
  • Градиенты: Кроме изображений, можно задавать линейные и радиальные градиенты.

Пример с градиентом:

.header {
  background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
}

Повторение фона: background-repeat

По умолчанию, если изображение меньше контейнера, браузер повторяет его по горизонтали и вертикали. Но это поведение можно контролировать!

Значения свойства:

  • repeat (по умолчанию) — повторяет изображение по обоим осям.
  • repeat-x — только по горизонтали.
  • repeat-y — только по вертикали.
  • no-repeat — запрещает повторение.
  • space — равномерно распределяет изображения с пробелами между ними.
  • round — масштабирует изображения, чтобы они заполнили контейнер без обрезки.

Пример:

.texture {
  background-image: url("pattern.png");
  background-repeat: repeat-x; /* Узор только по горизонтали */
}

Позиционирование фона: background-position

Свойство определяет, где именно будет расположено фоновое изображение внутри элемента.

.element {
  background-position: горизонтальное-положение вертикальное-положение;
}

Возможные значения:

  • Ключевые слова: top, bottom, left, right, center.
  • Проценты: 50% 20% (горизонталь, вертикаль).
  • Пиксели или другие единицы: 100px 200px.

Примеры:

  1. Центрирование изображения:
.hero-section {
  background-position: center center;
}
  1. Смещение вправо и вниз:
.banner {
  background-position: right 30px bottom 100px;
}

Комбинирование свойств

Часто используется сокращенная запись background для объединения всех параметров:

.card {
  background: #f5f5f5 url("icon.png") no-repeat right 20px center / 50px auto;
}
/* 
  #f5f5f5 — цвет фона  
  url("icon.png") — изображение  
  no-repeat — запрет повтора  
  right 20px center — позиция (смещение 20px справа и по центру вертикали)  
  / 50px auto — размер изображения (ширина 50px, высота автоматическая)  
*/

Практические задачи

Задача 1: Фоновый узор

Создайте блок размером 500x500px с повторяющимся узором (например, pattern.png), который заполняет только правую половину контейнера.

Решение:

.block {
  width: 500px;
  height: 500px;
  background-image: url("pattern.png");
  background-repeat: repeat-y;
  background-position: right;
}

Задача 2: Фоновое изображение с градиентом

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

Решение:

.overlay {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

Задача 3: Адаптивный фон

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

Решение:

.adaptive-bg {
  background-image: url("landscape.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

Частые ошибки

  1. Неправильные пути к изображениям. Всегда проверяйте, корректно ли указан путь.
  2. Игнорирование размера. Используйте background-size, чтобы контролировать масштаб.
  3. Ненужные повторы. Если изображение большое, отключите повтор через no-repeat.

Итоги 27-го урока

  • background-imageэто основа для работы с фонами.
  • background-repeatуправляет повторением изображения.
  • background-positionточно позиционирует фон.
  • Комбинируйте свойства для создания сложных эффектов!

Потренируйтесь на реальных проектах, только так знания превратятся в навыки.

Полный курс по HTML и CSS для начинающихпо сссылке: изучить все уроки по HTML и CSS

Уверен, после этого урока вы сможете создавать потрясающие фоны для своих проектов. Если остались вопросы, пишите в комментариях ниже.