I want my background image to take 50% of the div and the rest 50% to be text (the birthday text message) below it in a div which has flex-direction:column. Currently, the background image changes its height automatically (sometimes more than 50%, sometimes less than 50%) based on screen size, but I want it to always take 50% height with the "Birthday card image (Happy Birthday)" overlapping the envelope in the background as shown in the screenshot below, and the rest 50% for the text (birthday wish). How can I achieve that?
HTML file
<section class="normal-page">
<section class="e-greeting-design">
<div class="first-half">
<div class="first-half__bg-wrapper"> <img src="/assets/images/egreetingbg.png"></div>
<div class="first-half__img-wrapper"><img src="/assets/images/card-egreeting.png" alt=""></div>
</div>
<div class="second-half">
<div class="second-half__content-wrapper"><span>To: </span><span class="text-bold">Andy Raey</span>
<p class="text-bold">Happy Birthday! May you celebrate your 35th with all who are dear to you.</p>
</div>
</div>
</section>
</section>
SCSS File
.e-greeting-design {
width: 90%;
background-color: white;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1280px;
flex-direction: column;
margin-top: 20px;
> * {
flex: 1 1 100%;
}
.first-half {
position: relative;
&__bg-wrapper{
width: 100%;
object-fit: cover;
}
&__img-wrapper{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
width: 70%;
}
img {
object-fit: cover;
width: 100%;
display: block;
}
}
.second-half {
&__content-wrapper{
max-width: 75%;
margin: 80px 60px;
> span,> p{
font-size: 32px;
color: #5C068C;
font-size: 20px;
line-height: 32px;
}
p {
margin-top:48px;
font-size: 20px;
line-height: 32px;
}
}
}
}
Current output
*How I want it to look like *
