🎨 CSS Background: Стань мастером фонов за 7 уровней!

🎮 CSS Quest: Фоновые приключения

🧙‍♂️ Добро пожаловать, юный разработчик! Тебе предстоит пройти 7 уровней и овладеть искусством background в CSS. Прокачай свой скилл и стань мастером дизайна!

🟢 Уровень 1: Цвет фона

🧠 Теория: Свойство background-color задаёт фон любому элементу.

📜 Задание: Сделай <div> с красным фоном.

<div class="room">Я комната</div>

.room {
  background-color: red;
}

🟢 Уровень 2: Фоновое изображение

🧠 Теория: Используем background-image и url().

📜 Задание: Добавь изображение wall.png в качестве фона.

.room {
  background-image: url('wall.png');
}

⛔ Подсказка: Без background-repeat изображение может повторяться.

🟡 Уровень 3: Управление повтором

🧠 Теория: background-repeat: no-repeat; отключает повтор фона.

📜 Задание: Сделай так, чтобы фон не повторялся.

.room {
  background-image: url('wall.png');
  background-repeat: no-repeat;
}

🟡 Уровень 4: Размер изображения

🧠 Теория: background-size: cover; растягивает фон на весь элемент.

📜 Задание: Сделай, чтобы фон занимал всю площадь .room.

.room {
  background-image: url('wall.png');
  background-size: cover;
}

🟠 Уровень 5: Позиция и фиксированный фон

🧠 Теория: background-position: center; и background-attachment: fixed; — эффект параллакса.

📜 Задание: Центрируй фон и зафиксируй его при прокрутке.

.room {
  background-image: url('forest.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

🔵 Уровень 6: Сокращённая запись

🧠 Теория: Свойство background объединяет все в одну строку.

📜 Задание: Сделай одну строку для всего:

.room {
  background: url('bg.jpg') no-repeat center/cover fixed #000;
}

🔴 Финальный уровень: Градиенты и многослойность

🧠 Теория: Можно использовать несколько фонов, включая градиенты!

📜 Задание: Сделай градиент с поверхностным узором:

.room {
  background:
    url('pattern.png') repeat,
    linear-gradient(to right, #ff6a00, #ee0979);
}

🏆 Победа!

🎉 Ты прошёл все уровни! Теперь ты — маг фонового оформления!