Изображение в стеке на фоне полной страницы в середине

Question

.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}

<div class="wrapper">
  <img class="big-img" src="https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png" />
  <img class="small-img" src="http://loosechange.co.za/wp-content/uploads/2012/06/Personal-Discount-10-lg.jpg" />
</div>

Итак, я хочу поместить lo go прямо в середине фонового изображения, которое имеет полный размер страницы (height: 100vh). Я могу сделать это примерно за 10 секунд, используя Elementor, но я должен сделать это на веб-сайте без какой-либо CMS, так что это сложно для меня. Я попробовал буквально любой фрагмент, который смог найти в Интернете, но он всегда был о том, как поместить изображение поверх другого изображения, а не изображение поверх фона полной страницы.

Вот пример того, что я найдено: https://jsfiddle.net/uu3pqwpa/

Answer 1

Я бы буквально использовал background-image в CSS для большого контейнера и применил к нему гибкие настройки (подробности см. Ниже), чтобы центрировать меньший тег img внутри этого div (т.е. без абсолютного / относительного позиционирование, нет двух img меток):

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.big-img {
  width: 100vw;
  height: 100vh;
  border: 1px solid blue;
  position: relative;
  background: url('https://placehold.it/2000x1500/fda?text=Background-Image') center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-img {
  border: 1px solid red;
  width: 30%;
  height: 25vh;
}

<div class="big-img">
  <img class="small-img" src="https://placehold.it/200x100/ab7?text=centered-Image" />
</div>

Answer 2

.wrapper{
  display: flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  
  width: 25%;
  height:25%;
}

body {
 background-image: url("https://images.freeimages.com/images/small-previews/1c9/maine-at-4-45-am-1370871.jpg"); 
 background-size: cover;
 }

<div class="wrapper">

  
  <img class="small-img" src="https://images.freeimages.com/images/small-previews/25d/eagle-1523807.jpg"/>
  
  </div>

Answer 3

Размещение изображений в качестве фоновых изображений позволит использовать background-size: cover и разместить их в любом размере контейнера.

Использование псевдоэлементов, таких как ::before, является лишь способом очистить код HTML с элементами, которые в основном используются для стилизации.

Любые другие пояснения, приведенные ниже в коде в виде комментариев.

html, body {
  padding: 0px;  /* remove default spacing */
  margin: 0px;
}

.wrapper {
  position: relative;
  min-width: 100vw;
  min-height: 100vh;  /* min lets the element span beyond the page, if necessary. */
  
  /* didn't find image */
  /* background: url('https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png'); */
  background: url('https://picsum.photos/200/300');
}

.wrapper, .wrapper::before {
  box-sizing: border-box; /* needed to include border size in width and height */
  border: 1px solid blue;

  background-repeat: none;
  background-size: cover;
}

.wrapper::before {
  content: '';
  position: absolute;
  width: 25vw;
  height: 25vw; /* make it squarish */
  
  left: 50%;
  top: 50%;
  /* move element negative 50% of it's own size on both x and y coordinate */
  transform: translate(-50%, -50%);

  border-color: red;
  /* background: url('http://loosechange.co.za/wp-content/uploads/2012/06/Personal-Discount-10-lg.jpg'); */
  background: url('https://picsum.photos/200/200');
}

<div class="wrapper">

</div>

Answer 4

Вы можете установить фон обёртки, используя

background: url('https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png);

, сохраняя его положение относительно, но добавляя:

width: 100%; height: auto;

А затем оставить маленькое изображение, расположенное абсолютно