Stack image over full page background in the middle - html

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>
So, I want to place a logo right in the middle of a background image which is full page size (height: 100vh). I can do it in about 10 seconds using Elementor, but I have to do it on a website without any CMS, so that's hard for me. I tried literally any snippet I could find online, but it was always about how to stack an image on top of another image, not an image on top of a full-page background.
Here's an example of what I found: https://jsfiddle.net/uu3pqwpa/

Answer 1

I would literally use a background-imagein the CSS for the large container and apply flex settings to it (details see below) to center the smaller img tag within that div (i.e. no absolute/relative positioning, no two img tags):
* {
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

You could set the background of the wrapper using
background: url('https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png);
keeping it position relative, but adding:
width: 100%;
height: auto;
And then leave the small image positioned absolutely

Answer 3

Placing the images as background images will make it possible to use background-size: cover and have them fit in any size of the container.
Using pseudo-elements, like ::before, is just a way of clear up HTML code with elements that are mostly there for styling.
Any other kind of clarification down below in the code as comments.
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

.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>