Фон или картинку на картинку CSS

body { 
  /* необязательные стили для демонстрации */ 
  margin: 0; 
} 
 
.image-overlapping { 
  /* устанавливаем размеры контейнера */ 
  width: 100vw; 
  height: 100vh; 
  background-image: url("https://i.stack.imgur.com/DqIv7.jpg"); 
  /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ 
  background-size: 100% 100%; 
  /* позиционирование относительно контейнера */ 
  position: relative; 
} 
 
.image-overlapping:after { 
  content: ""; 
   
  /* абсолютное позиционирование */ 
  position: absolute; 
  /* растягиваем на всю ширину и высоту */ 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  /* добавляем полупрозрачность */ 
  opacity: 0.7; 
  /* делаем чтобы полупрозрачный элемент располагался поверх основного блока */ 
  z-index: 1; 
  background-image: url("https://i.stack.imgur.com/bleHC.jpg"); 
  /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ 
  background-size: 100% 100%; 
}

<div class="image-overlapping"> 
</div>

.darker { 
width:300px; 
height:300px; 
background:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 0), url(http://gdefon.org/_ph/8/1/478317672.jpg) 
}

<div class="darker"> 
 
</div>