Search code examples
htmlcssbackground-image

I have a question about background-image in CSS

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

enter image description here

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>

Solution

  • 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;
}

    enter image description here

    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>