Загрузка...

Фоны в CSS

Вы умеете красить текст. Теперь покрасьте поверхность позади. Фоны заполняют блок элемента — сплошной цвет, фото и позже градиенты — а буквы остаются сверху с color.

Что такое фон CSS?

Фон — слой, нарисованный позади содержимого элемента (обычно и за областью padding). Управляйте им семейством свойств: background-color, background-image, background-repeat, background-size, background-position и сокращением background. Градиентам — отдельный урок; сегодня сплошные заливки и основы изображения.

Свойства одним взглядом

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

📊 Повседневные свойства фона CSS

Свойство Задача Повседневный старт
background-color Сплошная заливка за содержимым background-color: #f1f5f9;
background-image Слой картинки (позже градиент) background-image: url("hero.jpg");
background-repeat Плитка или её отключение background-repeat: no-repeat;
background-size Масштаб картинки в блоке background-size: cover;
background-position Выравнивание картинки background-position: center;
background Сокращение нескольких значений background: #0f172a url("a.jpg") center / cover no-repeat;

Сплошные заливки с background-color

Простейший фон — сплошной цвет. Подойдёт любое значение цвета, которое вы уже знаете — именованное, hex, rgb или hsl.

Сплошной фон карточки

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Текст должен читаться

Ставьте color для букв и background-color для блока. Светлая заливка — более тёмный текст; тёмная — более светлый.

Изображения с background-image

Укажите файл через url("…"). Пути относительны к CSS (или абсолютные URL). Картинка за содержимым — это не <img> в потоке HTML.

Фото за блоком hero

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Картинка vs <img>

<img> — когда фото контент (alt, смысл). background-image — когда это декор за интерфейсом или секцией.

Остановить плитку: no-repeat + cover

По умолчанию многие браузеры заполняют плиткой маленькое изображение. Для hero отключите повтор и масштабируйте через cover, чтобы фото заполнило блок.

Hero-изображение, заполняющее блок

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover одним предложением

cover увеличивает, пока блок не заполнится — края могут обрезаться. contain вмещает всю картинку — возможны пустые полосы.

Наведите фокус

background-position выбирает, какая часть фото остаётся видимой — полезно, когда cover режет лица или логотипы.

Наведение фото

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Сокращение (оставьте читаемым)

Можно объединить значения в background. Пока учитесь — пишите раздельно; к сокращению переходите, когда порядок знаком.

Компактное сокращение background

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Подсказка порядка

Частый шаблон: цвет, изображение, position / size, repeat. Если сокращение путает — снова разделите. Оба варианта валидны.

Попробуйте сами

  1. .card с background-color: #f1f5f9 и тёмным текстом через color.
  2. .hero с background-image: url("…"), min-height и светлым текстом.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Сдвиньте position на left center или right center — смотрите, что остаётся в кадре.
  5. По желанию: перепишите hero сокращением background с запасным цветом перед url().

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

  • color вместо заливки блока — красит только буквы
  • Забыть no-repeat, и логотип замостит секцию
  • Битые пути url("…") (не та папка или без кавычек)
  • Огромные несжатые фото как фон — медленные страницы
  • Прыгать к сложным градиентам до того, как освоены сплошной цвет + одно изображение (градиенты дальше)

Кратко

  • Фоны рисуются за содержимым; color красит текст
  • background-color для сплошного; background-image для фото
  • Управляйте фото через no-repeat, cover/contain и position
  • Сокращение необязательно — ясность важнее хитрости при обучении
  • Полные рецепты градиентов — в следующем уроке
  • Практикуйте серую карточку и фото-hero, пока имена свойств не закрепятся

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок