I have a question about background-image in CSS

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"> <a href="http://carevisa.at/readmore/" class="Readmore">More details</a> <div class="btn"> <a href="#">Online application</a> </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"> <a href="http://carevisa.at/readmore/" class="Readmore">More details</a> <div class="btn"> <a href="#">Online application</a> </div> </div> </div> <div id="price"> <!--price tab--> <div class="plan"> <a href="http://carevisa.at/readmore/" class="Readmore">More details</a> <div class="btn"> <a href="#">Online application</a> </div> </div> </div> <div id="price"> <!--price tab--> <div class="plan"> <a href="http://carevisa.at/readmore/" class="Readmore">More details</a> <div class="btn"> <a href="#">Online application</a> </div> </div> </div>