Как сделать фон картинкой и прозрачность в CSS

В CSS фоновую картинку задают через background-image, а прозрачность чаще делают отдельным слоем, градиентом или полупрозрачной подложкой. Важный момент: если поставить opacity на весь блок, прозрачной станет не только картинка, но и текст внутри блока

Поэтому правильный подход такой: фон остается фоном, затемнение или прозрачность живет отдельно, текст лежит поверх и остается читаемым

По этой теме полезно отдельно посмотреть CSS ::before и ::after — псевдоэлементы, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть CSS box-shadow — тени для элементов, чтобы расширить контекст и сравнить подходы

Фон картинкой через background-image

Минимальный пример:

<section class="hero">
  <h1>Курс по созданию сайтов</h1>
  <p>Практика HTML, CSS и публикация первой страницы</p>
</section>

.hero {
  min-height: 520px;
  padding: 80px 24px;
  color: white;
  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Что делают свойства:

• background-image подключает изображение
• background-size: cover заполняет блок без пустых полос
• background-position: center держит важную часть ближе к центру
• background-repeat: no-repeat запрещает повторение картинки плиткой

Если картинка не появилась, проверьте путь к файлу. Если CSS лежит в папке css, а изображение в папке images, путь может быть таким:

background-image: url("../images/background.jpg");

Затемнение фоновой картинки через слой

Надежный способ затемнить фон и не трогать текст — псевдоэлемент ::before

<section class="hero hero-dark">
  <div class="hero-content">
    <h1>Лендинг для онлайн-курса</h1>
    <p>Структура, тексты, дизайн и форма заявки</p>
    <a href="#form">Оставить заявку</a>
  </div>
</section>

.hero-dark {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 80px 24px;
  color: white;
  background-image: url("images/course.jpg");
  background-size: cover;
  background-position: center;
}

.hero-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

Слой ::before закрывает фон полупрозрачным цветом, а контент получает z-index: 1 и остается поверх

Затемнение через градиент

Если нужен более короткий вариант, можно совместить градиент и картинку в одном background-image

.hero {
  min-height: 520px;
  color: white;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    url("images/background.jpg");
  background-size: cover;
  background-position: center;
}

Первым слоем идет градиент, вторым изображение. Браузер рисует первый слой поверх второго, поэтому картинка затемняется

Такой способ удобен для первого экрана, карточек и блоков с текстом поверх фотографии

Прозрачная подложка под текстом

Если нужно не затемнять весь фон, а выделить только текстовый блок, используйте rgba

<section class="promo">
  <div class="text-box">
    <h2>Запись на консультацию</h2>
    <p>Разберем структуру сайта, тексты и первые шаги продвижения</p>
  </div>
</section>

.promo {
  min-height: 480px;
  padding: 64px 24px;
  background: url("images/office.jpg") center / cover no-repeat;
}

.text-box {
  max-width: 520px;
  padding: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #172033;
}

Здесь прозрачной становится только подложка, а текст остается полностью непрозрачным

Почему opacity часто ломает текст

Так делать не стоит, если внутри блока есть текст:

.hero {
  opacity: 0.5;
}

opacity применяется ко всему элементу: фону, заголовку, кнопке, картинкам и дочерним блокам. В результате текст становится бледным и хуже читается

Используйте opacity для отдельной картинки или декоративного элемента, но не для контейнера с важным текстом

Полупрозрачная картинка как отдельный слой

Если фон должен быть отдельным изображением с прозрачностью, можно вынести его в псевдоэлемент

.section {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/pattern.png") center / cover no-repeat;
  opacity: 0.25;
}

.section > * {
  position: relative;
  z-index: 1;
}

Так прозрачной становится только картинка в ::before, а основной контент не бледнеет

Адаптивность фоновой картинки

На телефоне фоновая картинка часто обрезается. Это нормально для cover, но важно управлять тем, какая часть остается видимой

.hero {
  background-position: center;
}

@media (max-width: 640px) {
  .hero {
    min-height: 420px;
    background-position: 62% center;
  }
}

Если на фото важен человек справа, сместите background-position. Если важен центр, оставьте center. Не пытайтесь показать всю широкую фотографию на узком экране любой ценой: появятся пустые поля или слишком мелкая композиция

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

• ставить opacity на весь блок с текстом
• забывать position: relative у контейнера
• не задавать z-index контенту поверх слоя
• писать неправильный путь к картинке
• использовать слишком тяжелое изображение
• оставлять белый текст на светлой фотографии
• не проверять фон на телефоне

Если текст читается только на вашем мониторе, затемнение слабое. Проверьте блок на телефоне, при низкой яркости экрана и на изображении после сжатия

Чек-лист

• картинка подключилась
• фон не повторяется плиткой
• важная часть фото не обрезана на телефоне
• текст читается на светлых и темных участках
• прозрачность не применяется к тексту
• слой затемнения лежит под контентом
• изображение сжато до разумного размера
• путь к файлу работает после публикации

Часто задаваемые вопросы

Как сделать прозрачность только у фона

Сделайте фон через псевдоэлемент ::before и поставьте opacity ему, а не основному блоку. Либо используйте rgba или linear-gradient

Чем отличается rgba от opacity

rgba делает прозрачным конкретный цвет. opacity делает прозрачным весь элемент вместе с дочерним содержимым

Почему фон не отображается

Чаще всего указан неверный путь к изображению, файл не загружен на сервер или CSS-файл находится в другой папке. Проверьте путь относительно CSS-файла

Как сделать фон на весь экран

Задайте блоку min-height: 100vh, background-size: cover, background-position: center и проверьте, что на мобильном экране важная часть изображения не обрезалась