Верстка накладывающихся изображений друг на друга. Определение градиента

[Super_Saimon]

Здравствуйте! На приведенном изображение хедера лендинга столкнулся с непониманием как на слайде слайдера расположить текст, на него изображение пирожного и тень пирожного под самим изображением. На макете это три разных объекта: Текст, изображение с пирожным и слой с тенью под пирожным. Я склоняюсь к двум вариантам: слить текст и изображения в один объект,и втулить его как background. Или создать блок, в котором центрирую текст, а поверх этого блока абсолютом блок с изображением и тенью под ним...ну и с текстом,  и всеми елементами взаимодействия. Хотелось бы узнать как решили бы задачу знающие люди. Ну и вторая часть моего вопроса-как определить градиент на фоне? Сам фон сделан отдельным слоем  и у него нет эффекта типа "градиент". Когда попытался в тупую загнать его в css - фон позиционируется как изображение в png. Угадать в ручную не получается-не могу угадать такой же радиальный градиент. 

 

 

 

 

 

Edited March 13, 2018 by Super_Saimon

[AlexZaw]

Сделайте обертку картинке, и с помощью псевдоэлемента у обертки сделайте тень.

Если у самого фона нет эффекта то ищите по слоям, где то должен быть слой с нужным эффектом

[Super_Saimon]

52 минуты назад, AlexZaw сказал:

Сделайте обертку картинке, и с помощью псевдоэлемента у обертки сделайте тень.

Если у самого фона нет эффекта то ищите по слоям, где то должен быть слой с нужным эффектом

Изиняюсь за назойливость, но интересует как расположить текст на заднем фоне? Работать с помощью абсолютов? 
То есть, в основном блоке текст, а в позиционируемом блоке изображение и другие элементы на слайде?

[AlexZaw]

Вот в качестве примера:

See the Pen MVKRre by Alexandr (@AlexZaw) on CodePen.

<div class="slide">
  <span>пироженка</span>
  <div class="item">
    <div class="image">
      <img src="https://pavalescoba.github.io/hipsweet/img/slider/slider-content/cupcake-big.png" alt="">
    </div>
    <div class="txt">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, odit numquam ex voluptates doloremque ducimus unde facere eius molestias dolor omnis dolorum aut consequuntur quisquam ipsum, itaque maxime et eveniet?
    </div>
  </div>
</div>

.slide{
  width: 900px;
  height: 500px;
  text-align: center;
  position: relative;
  background: #e55137;
  color:#fff;
}
.slide:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
span{
  display: inline-block;
  font-size: 150px;
  color: rgba(255,255,255,.5);
}
img{
  width: 200px;
}
.item{
  display: inline-block;
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.image{
  display: inline-block;
  float: left;
}
.txt{
  max-width: 300px;
  float: right;
}

 

Edited March 14, 2018 by AlexZaw

[Super_Saimon]

Спасибо за помощь!