Как разместить фоновое изображение поверх блока?

Question

Мой вопрос: для центрирования контента я использую класс container с отступами margin: 0 auto, но мне нужен навбар и фон. Если с навбаром проблем нет, то фон просто не вылазит за границы контейнера, а просто остается внутри него.

* {
  font-family: sans-serif;
  margin: 0;
}

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}

.navbar-phone {
  display: flex;
  flex-direction: column;
}

.navbar-phone__number {
  font-family: 'Museo Sans Cyrl 700';
  font-size: 24px;
  font-weight: 400;
  color: #5e5e5e;
  line-height: 42.35px;
  text-align: right;
}

.navbar-phone__request-call {
  font-family: 'Museo Sans Cyrl 300';
  color: #72a3b4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-align: right;
}

.main-info {
  background: url(https://nazarchonok.github.io/homework4/img/background-image.jpg);
  background-size: cover;
  width: 100%;
  max-width: 100%;
}

<header class="header">
  <div class="container">
    <div class="navbar">
      <div class="navbar__logo">
        <img src="https://nazarchonok.github.io/homework4/img/navbar-logo.png" alt="Крылатко">
      </div>
      <div class="navbar-phone">
        <span class="navbar-phone__number">+7 (950) 733-31-70</span>
        <a href="#" class="navbar-phone__request-call">Заказать обратный звонок</a>
      </div>
    </div>
    <div class="main-info">
      <h1 class="main-info__title">Сертифицированные детские бескаркасные автокресла</h1>
      <h2 class="main-info__subtitle">с бесплатной доставкой по Челябинску</h2>
    </div>
  </div>
</header>

Answer 1

Необязательно всё складывать в контейнер. Можно просто добавлять этот класс необходимым элементам. Конкретно я бы так не делал центрирование, но вот пример:

* {
  font-family: sans-serif;
  margin: 0;
}

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}

.navbar-phone {
  display: flex;
  flex-direction: column;
}

.navbar-phone__number {
  font-family: 'Museo Sans Cyrl 700';
  font-size: 24px;
  font-weight: 400;
  color: #5e5e5e;
  line-height: 42.35px;
  text-align: right;
}

.navbar-phone__request-call {
  font-family: 'Museo Sans Cyrl 300';
  color: #72a3b4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-align: right;
}

.main-info {
  background: url(https://nazarchonok.github.io/homework4/img/background-image.jpg);
  background-size: cover;
  width: 100%;
  max-width: 100%;
}

<header class="header">
    <div class="navbar container"> <!-- <<<<<<<<< -->
      <div class="navbar__logo">
        <img src="https://nazarchonok.github.io/homework4/img/navbar-logo.png" alt="Крылатко">
      </div>
      <div class="navbar-phone">
        <span class="navbar-phone__number">+7 (950) 733-31-70</span>
        <a href="#" class="navbar-phone__request-call">Заказать обратный звонок</a>
      </div>
    </div>
    <div class="main-info">
      <h1 class="main-info__title container"> <!-- <<<<<<<<< -->
      Сертифицированные детские бескаркасные автокресла
      </h1>
      <h2 class="main-info__subtitle container"> <!-- <<<<<<<<< -->
      с бесплатной доставкой по Челябинску
      </h2>
    </div>
</header>

БЛОГ НА HUSL

Как разместить фоновое изображение поверх блока?

Ответы (1 шт):