<div class="layer">
  <div class="layer-in">
    <img src="https://homepagenopro.com/wp-content/uploads/2018/08/d11_img_mizudori.png" alt="" class="layer-img">
  </div>
</div>

/* 大枠ボックス */
.layer{
  /* 背景画像設定 */
  background: url(https://homepagenopro.com/wp-content/uploads/2018/08/d11_img_beach.jpg) no-repeat 0 0;
  background-size: 100%;
  /* ボックス配置指定 */
  position: relative;
  margin: 0 auto;
  text-align: center;
  /* ボックスサイズ指定 */
  width: 640px;
  height: 358px;
}

/* 重ねるボックスの設定 */
.layer-in{
  /* ボックス配置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  /* 上下左右中央のときのみ */
  width: 400px; 
  height: 100px;
}

/* みずどりの基本設定 */
.layer-img{
  width: 150px;
  height: auto;
}