Как с помощью jquery найти на странице изображение в определенном блоке и добавить это изображение в качестве фона для блока с указанным классом

Есть следующая конструкция, в ней необходимо найти img в блоке с классом gamma и путь/адрес этого изображения назначить в качестве background-image для блока с классом alfa

.alfa {
  padding: 15px;
  background-size: cover;
  }
  
  .alfa div {
    margin:10px;
    padding: 20px;
    background: #f8f8f8;
    width: 300px;
  }
  
  .gamma img {
    max-width: 100%;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alfa">

  <div class="delta">
    Он был так угрюм, что его перестали посещать даже мысли.
  </div>

  <div class="gamma">
    <img src="https://i.ibb.co/T4gQvgx/000.jpg">
  </div>

  <div class="omega">
    Мудрость приходит с годами. А потом уходит…
  </div>


</div>

Как результат у блока с классом alfa должно добавится свойство style="background-image:url(https://i.ibb.co/T4gQvgx/000.jpg);"> при этом адрес исходного изображения изначально неизвестен, его нужно найти после загрузки страницы в блоке gamma

Подскажите пожалуйста, как это реализовать с помощью скрипта?


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

Автор решения: Slava

Нашел решение, возможно кому-то пригодится:

$('.alfa').css('background-image', 'url(' + $(".gamma img").attr("src") + ')');
.alfa {
  padding: 15px;
  background-size: cover;
}

.alfa div {
  margin: 10px;
  padding: 20px;
  background: #f8f8f8;
  width: 300px;
}

.gamma img {
  max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alfa">

  <div class="delta">
    Он был так угрюм, что его перестали посещать даже мысли.
  </div>

  <div class="gamma">
    <img src="https://i.ibb.co/T4gQvgx/000.jpg">
  </div>

  <div class="omega">
    Мудрость приходит с годами. А потом уходит…
  </div>


</div>

→ Ссылка