I have a question about background-image in CSS - html

Question

I have a question about background-image in CSS. I want to design a box of which all parts are displayed as background image except for 1 link and button. I need 3 of such box in one line. I've attached an example picture. I can't figure out the problem and need guidance
body {
background: #F2F2F2;
padding: 0px;
}
#price {
text-align: center;
align-items: center;
background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#price::after{
content: "";
display: table;
clear: both;
}
.plan {
display: flex;
margin: 10px 2%;
font-family: 'Lato', Arial, sans-serif;
width: 477px;
height: 832px;
}
.btn {
position: absolute;
padding: 1em;
padding-bottom: 2em;
text-align: center;
}
.btn a {
background: red;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
}
.IMGbox{
width: 477px;
height: 832px;
}
.Readmore{
position: absolute;
text-align: center;
width: 100px;
}
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>

Answer 1

try this instead,
Use absolute positioning to plan class. That is,
.plan {
position:absolute;
bottom:0;
left:0;
right:0;
}
And give width and height to price id instead of plan class.
#price {
position:relative;
width: 477px;
height: 832px;
display: inline-block;
}
Codepen Demo
body {
background: #F2F2F2;
padding: 0px;
}
#price {
position:relative;
background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
background-repeat: no-repeat;
background-position: center;
width: 477px;
height: 832px;
display: inline-block;
}
#price::after{
content: "";
display: table;
clear: both;
}
.plan {
position:absolute;
bottom:0;
left:0;
right:0;
margin: 10px 2%;
font-family: 'Lato', Arial, sans-serif;
}
.btn {
padding: 1em;
padding-bottom: 2em;
text-align: center;
}
.btn a {
background: red;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
}
.IMGbox{
width: 477px;
height: 832px;
}
.Readmore{
text-align: center;
width: 100%;
display: block;
margin-bottom: 25px;
}
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>
<div id="price">
<!--price tab-->
<div class="plan">
More details
<div class="btn">
Online application
</div>
</div>
</div>