Как вставить два изображения, чтобы они были за основным контентом?

Question

У меня есть блок, в котором есть 2 изображения находящиеся по бокам. Текстовый контент, расположен по центру с шириной 1024 px.

Я добавил .wrapper для контента, но при добавлении изображений и в СSS и в HTML код, в голове терялась структура.

Как вставить семантически правильно 2 изображения, чтобы они были за div.wrapper в котором был основной контент?

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    margin: 0 auto;
    max-width: 700px;
    background: #b23;
}
.header{
    display: flex;
    justify-content: space-between;
    background: ;
}

<header>
  <div class="wrapper">
    <div class="header">
      <div class="header-logo"><img src="" alt="">Rizor</div>
        <nav class="header-nav">
          <a class="header-nav_item">Преимущества</a>
          <a class="header-nav_item">Характеристики</a>
          <a class="header-nav_item">Для кого</a>
        </nav>
    </div>
  </div>
</header>
<img src="img/bg-main.png" alt=""><div class="wrapper">
        <div class="wrapper">
        <article>
          <h1>Rizor</h1>
        </article>
      </div>
      </main>

<header>
  <div class="wrapper">
    <div class="header">
      <div class="header-logo"><img src="" alt="">Rizor</div>
        <nav class="header-nav">
          <a class="header-nav_item">Преимущества</a>
          <a class="header-nav_item">Характеристики</a>
          <a class="header-nav_item">Для кого</a>
        </nav>
    </div>
  </div>
</header>

Answer 1

Например, можно это сделать с помощью псевдоэлементов :before и :after

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 90vh;
  line-height: 90vh;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  color: black;
  font-family: monospace;
}

.wrapper:before {
  opacity: 0.7;
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: url('https://newsbuzz.ru/wp-content/uploads/2019/10/796.jpg') center left no-repeat;
  background-size: cover;
}

.wrapper:after {
  opacity: 0.3;
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  background: url('https://pbs.twimg.com/media/ENVgvJnWsAACTE5.jpg') center left no-repeat;
  background-size: cover;
}

<div class="wrapper">Это Александр Сергеевич Пушкин</div>

БЛОГ НА HUSL

Как вставить два изображения, чтобы они были за основным контентом?

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