Overlapping image with background image that has navbar and logo - html

Question

How do I stack images on bg-image exactly like this using html there is a navbar and logo on the BG as well
i tried something like this
// clearfix
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.image-stack__item--top {
float: left;
width: 66%;
margin-right: -100%;
padding-top: 15%; // arbitrary
position: relative;
z-index: 1;
}
.image-stack__item--bottom {
float: right;
width: 75%;
}
it didnt work as anticipated
enter image description here

Answer 1

There are many ways to approach this.
But first you need to understand
CSS Positioning, CSS Layout (Using Grid / FlexBox / Float, etc ) & CSS BoxModel.
So based on the snippet you posted, I am going with float, but I would have recommended flex as it's powerful and flexible.
Below is what I came up with.
/* USING MOBILE-FIRST APPROACH, I.E DEFINING CSS FOR MOBILE FIRST */
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
/* Will serve as container */
.image-stack {
position: relative;
}
.image-stack .bg {
position: absolute;
height: 100%;
width: 100%;
/* overlay-color */
background: black;
}
.image-stack .bg>img {
opacity: .75;
width: 100%;
height: 100%;
object-fit: cover;
}
/* will serve as row */
.image-stack .image-stack__item {
position: relative;
padding: 20px 10px;
height: 100%;
}
.col-half {
padding: 0 10px;
position: relative;
height: 100%;
}
.text-format {
color: white;
margin-bottom: 30px;
}
.text-format h1 {
font-size: 3rem;
font-weight: 700;
margin: 5px 0;
}
.img-overlap {
width: 100%;
height: 100%;
object-fit: cover;
}
/* RESPONSIVE CSS FOR BIG DEVICES */
#media screen and (min-width: 768px) {
.image-stack {
background: yellow;
/* height must be set in vh, px, rem, em */
height: 80vh;
margin-bottom: 60px;
}
.col-half {
/* SINCE WE ARE NOT USING `box-sizing: border-box` WE HAVE TO REMOVE THE LEFT AND RIGHT PADDING WE GIVE FROM MOBILE CSS = (20PX) FROM THE WIDTH */
width: calc(50% - 20px);
float: left;
}
.text-format {
margin-bottom: 0px;
}
.img-overlap {
position: absolute;
left: 0;
bottom: -30px;
}
}
<div class="image-stack">
<div class="bg">
<img src="https://picsum.photos/id/1045/1440/400">
</div>
<div class="image-stack__item">
<div class="col-half text-format">
<p>5th Consistent Award Winning Year!</p>
<h1>Modern Design Solutions</h1>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
See our Projects
</div>
<div class="col-half">
<img src="https://picsum.photos/id/1008/600/400" class="img-overlap" alt="Overlapping Image" />
</div>
<!-- Notice Break that I used to clear float -->
<br clear="both" />
</div>
</div>
<div style="background: brown">
Other test
</div>
I added comments in the css section to guide you.
CodePen Link => https://jsfiddle.net/d5urpbL2/17/