Yo lo hice un poco diferente ya que mi imagen es muy grande y debia ajustarla al tamaño de mi contenedor, pero me salio el mismo resultado. Excelente clase, felicidades y gracias a EdTeam por tan buen trabajo.

<div class="card">
       <div class="text-background">
         <p class="card-title">Welcome</p>
       </div>
     </div> ```

``` CSS
.card{
 position: relative;
 width: 30%;
 height: 80%;
 background-image: url(./images/cody-lannom-aeYQSnN4dOo-unsplash.jpg);
 background-size: cover;
 margin-left: 4.5em;
 border: solid .4em #fff;
}

.text-background{
 width: 100%;
 height: 10%;
 position: absolute;
 top: 90%;
 background-color: rgba(0, 0, 0, .65);
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.4em;
} ```

Yo lo hice un poco diferente ya que mi imagen es muy grande y debia ajustarla al tamaño de mi contenedor, pero me salio el mismo resultado. Excelente clase, felicidades y gracias a EdTeam por tan buen trabajo.

<div class="card">
       <div class="text-background">
         <p class="card-title">Welcome</p>
       </div>
     </div> ```

``` CSS
.card{
 position: relative;
 width: 30%;
 height: 80%;
 background-image: url(./images/cody-lannom-aeYQSnN4dOo-unsplash.jpg);
 background-size: cover;
 margin-left: 4.5em;
 border: solid .4em #fff;
}

.text-background{
 width: 100%;
 height: 10%;
 position: absolute;
 top: 90%;
 background-color: rgba(0, 0, 0, .65);
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.4em;
} ```