расположение картинки на заднем фоне

Question

section {
    padding: 0 56px 0 56px;
}

.container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;    
}
.container .main{
    margin: 0;
}
.back {
    animation: test 1s  ease-in-out;
    z-index: -1;
    width: 100%;
    max-width: 1440px;
    display: flex;
    margin-top: 24px;
  }
.background {
    z-index: -1;
    animation: teste 2s  ease;
    width: 100%;
    max-width: 1440px;
  }

 <section>
    <div class="container back">
       <div class="back"> <img class="background" src="img/svg/BG 2021 shape.svg" alt="2021"></div>
    </div>
    </section> 
    
    <section>
        <div  class="container main">
        <div class="main">
            <p>знакомься с нами online</p>
            <h1>Все о нас</h1>
            <div class="buttons">
            <button  class="sub js-open-modal" data-modal="1">
                Следить за событиями
            </button>
            <button class="join js-open-modal" data-modal="2" >
                Хочу в ТУСУР
            </button>
        </div>
       </div>
    </div>
    </section>

Всем привет!

Как сделать так, чтобы блок с картинкой был на фоном для остальных? Т.е чтобы этот блок был позади остальных

Заранее спасибо за ответ.

P.S необходимо, чтобы потом с картинкой можно было выполнять анимации под прелоадер

Answer 1

Видимо что-то такое Вы имели ввиду?

<section>
<div class="container" style="position: absolute; z-index: -1;" class="container back">
   <div class="back"> <img class="background" src="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg" alt="2021"></div>
</div>
</section> 

<section>
    <div class="container" class="container main">
    <div class="main">
        <p>знакомься с нами online</p>
        <h1>Все о нас</h1>
        <div class="buttons">
        <button  class="sub js-open-modal" data-modal="1">
            Следить за событиями
        </button>
        <button class="join js-open-modal" data-modal="2" >
            Хочу в ТУСУР
        </button>
    </div>
   </div>
</div>
</section>

Answer 2

Как-то так

.intro__background::before не относится к задаче, я его добавил просто, чтобы картинка была светлой, чтобы не сливалась с чёрным текстом

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1000px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
  display: block;
}

img {
  display: block;
  max-width: 100%;
}

section {
  padding: 40px 0;
}

.intro {
  overflow: hidden;
  position: relative;
}

.intro__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: scale 1s linear forwards;
}

.intro__background img {
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
}

.intro__background::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes scale {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<section class="intro">
  <div class="container">
    <div class="intro__inner">
      <p>знакомься с нами online</p>
      <h1>Все о нас</h1>
      
      <div class="buttons">
        <button class="sub js-open-modal" data-modal="1">
          Следить за событиями
        </button>
        <button class="join js-open-modal" data-modal="2">
          Хочу в ТУСУР
        </button>
      </div>
      
      <div class="intro__background">
        <img src="https://picsum.photos/id/60/2000/1000">
      </div>
      
    </div>
  </div>
</section>

БЛОГ НА HUSL

расположение картинки на заднем фоне

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