Работа с фоном: background-color, background-image, background-repeat и др.

Создаём выразительные фоны: от простого к магии ✨

Фон — это не просто "подложка". Это настроение, атмосфера и даже навигационные подсказки! Давайте разберём инструменты, которые превратят ваши блоки в визуальные шедевры.

🎨 background-color — основа основ

Самый простой способ задать фон — использовать цвет. Важно помнить про контраст с текстом!

.hero {
  background-color: #2ecc71; /* Зелёный */
  color: white; /* Белый текст для контраста */
}

.error-box {
  background-color: rgba(231, 76, 60, 0.8); /* Красный с прозрачностью 80% */
}

💡 Совет: Для полупрозрачных фонов используйте rgba() или hsla(). Это лучше, чем opacity, потому что не влияет на дочерние элементы!

🌄 background-image — когда нужна картинка

Хотите добавить текстуру, градиент или фотографию? Вот как это работает:

.header {
  background-image: url('texture.png'); /* Локальный файл */
}

.hero-section {
  background-image: linear-gradient(to right, #3498db, #2ecc71); /* Градиент */
}

.pattern {
  background-image: url('data:image/svg+xml;utf8,<svg...>'); /* SVG прямо в CSS! */
}

⚠️ Важно! Всегда указывайте background-color как fallback на случай, если изображение не загрузится.

🔁 background-repeat — контролируем повторение

По умолчанию маленькие изображения повторяются (tile). Но это можно изменить:

.tiled {
  background-repeat: repeat; /* По умолчанию */
}

.vertical-stripes {
  background-repeat: repeat-y; /* Только по вертикали */
}

.single-image {
  background-repeat: no-repeat; /* Без повторения */
}

.partial-repeat {
  background-repeat: space round; /* Современные значения */
}

🖼️ background-position — точное позиционирование

Хотите, чтобы фоновая картинка была в правом нижнем углу? Легко!

.logo-watermark {
  background-position: right bottom; /* Ключевые слова */
}

.custom-position {
  background-position: 70% 25%; /* Проценты от размера блока */
}

.pixel-perfect {
  background-position: 20px 10px; /* Точные пиксели */
}

🎯 Профессиональный лайфхак: Комбинируйте проценты и пиксели для сложных эффектов!

📏 background-size — растягиваем и подгоняем

Современный CSS позволяет полностью контролировать размер фона:

.cover-bg {
  background-size: cover; /* Заполняет весь блок */
}

.contain-bg {
  background-size: contain; /* Вмещает полностью */
}

.custom-size {
  background-size: 80% auto; /* Ширина 80%, высота auto */
}

.multibg {
  background-size: 100px 100px, cover; /* Для нескольких фонов */
}

🎭 background-attachment — фиксируем или скроллим

Создаём параллакс-эффекты и фиксированные фоны:

.parallax {
  background-attachment: fixed; /* Фиксировано относительно viewport */
}

.local-scroll {
  background-attachment: local; /* Скроллится с содержимым */
}

.default-scroll {
  background-attachment: scroll; /* Стандартное поведение */
}

⚠️ Внимание: fixed может плохо работать на мобильных устройствах!

✨ Многслойные фоны — суперсила CSS3

Создавайте сложные композиции с несколькими фонами:

.fancy-banner {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('hero-image.jpg') center/cover;
}

.pattern-overlay {
  background: 
    url('dots.png') repeat,
    linear-gradient(#3498db, #2c3e50);
}

Порядок важен: первый слой будет поверх остальных!

🛠️ Сокращённая запись background

Все свойства можно объединить в одном правиле:

.optimized-bg {
  background: 
    url('image.png') center/cover no-repeat fixed padding-box content-box #2ecc71;
}

Порядок значений:

color
image
repeat
attachment
position/size (через слэш)
origin/clip (редко используется)

💡 Запомните: background-size можно указать только после background-position и через косую черту!

🏆 Практический пример: карточка продукта

Применим все знания в одном красивом компоненте:

.product-card {
  width: 300px;
  height: 400px;
  padding: 20px;
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: 
    linear-gradient(135deg, rgba(0,0,0,0.6) 0%, transparent 60%),
    url('product-bg.jpg') center/cover no-repeat,
    #f1c40f; /* Fallback цвет */
  transition: all 0.3s ease;
}

.product-card:hover {
  background-size: 110% auto;
}