less
.content-card {
width: 32rem;
border-radius: 4px;
box-shadow: 0 2px 6px 0 rgba(154,154,154,.78);
background: #fff;
.content-img {
.img-a {
width: 320px;
height: 150px;
}
}
.content-texte {
padding: 3px 20px;
text-align: center;
.margen-derecho {
margin-right: 10px;
}
.sub {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
.card-title {
font-size: 12px;
font-family: @MuseoSans_7;
color: @color-purple;
text-transform: uppercase;
}
}
.caracteristicas {
padding: 0 10px;
.lbl-carec {
margin: 10px 0;
font-family: @MuseoSans_7;
color: #000;
font-size: 22px;
}
}
.precio {
margin: 10px 0;
span {
display: block;
}
.texte {
font-family: @MuseoSans_3;
font-size: 12px;
color: @color-gray-winp;
}
.price {
font-family: @MuseoSans_9;
color: @color-purple;
font-size: 24px;
}
}
.detalles {
margin: 10px 0;
a {
font-family: @MuseoSans_7;
font-size: 17px;
color: @color-green;
}
}
}
.card-footer {
.btn-agregar {
background: @color-green;
width: 100%;
border-radius: 0;
border: 0;
text-transform: none;
text-align: center !important;
vertical-align: middle;
padding: 6px 12px;
font-family: MuseoSans_9;
font-size: 19px;
color: #fff;
letter-spacing: 1px;
}
}
}
html
<div class="card-hotel">
<div class="row">
<div class="col-xs-12 col-md-5 box-image">
<img class="card-img-top img-a" src="https://cdn.mexicodestinos.com/hoteles/hotel-moon-palace-cancun-slide-princ-min.jpg" alt="hotel bla bla">
<div class="destinoo">
<span> Playa suites Acapulco </span>
</div>
<div class="descuento_cora">
<span class="kokoro">
<i id="kokoro" class="fh-icon fh-icon-people-icon tam"></i>
</span>
<span class="desc">
40% DE DTO
</span>
</div>
</div>
<div class="col-xs-12 col-sm-7 col-md-7 information">
<div class="title-card-hotel">
<span class="nombre">Hotel playa suites Acapulco ¡Todo Incluido!</span>
<%-- <div class="table-generic">
<div class="tb-col-card space-obj"></div>
<div class="tb-col-card"></div>
<div class="tb-col-card categorias space-obj"></div>
</div>--%>
<div class="datos-hotel">
<span><i class="inser-line"><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i></i></span>
<span class="ciudad">Puerto Vallarta</span>
<span class="tag-cate">Familiar</span> <span class="tag-cate">Familiar</span>
</div>
</div>
<div class="servicios">
<ul class="list-servicios">
<li><i class="fh-icon fh-icon-badge"></i> 2 adultos</li>
<li><i class="fh-icon fh-icon-badge"></i> 2 niños</li>
<li><i class="fh-icon fh-icon-badge"></i> Habitación estandar</li>
<li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
<li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
<li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
</ul>
</div>
<div class="prices">
<div class="title"><span>PRECIO</span></div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 desc">
<span class="money">1,999</span>
</div>
<div class="col-xs-4 col-sm-6 col-md-6 prec">
<div class="table-generic">
<div class="tb-col price-final">3,639</div>
<div class="tb-col tb-top moneda-final">mxn</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 cont-button">
<button class="btn btn-cambiar">CAMBIAR</button>
</div>
</div>
</div>
<div class="desc-nota">
<span class="msg-desc">AL ELEGIR ESTE HOTEL AHORRARAS 1,000 MXN</span>
</div>
</div>
</div>
</div>
The box-image div, does not adapt to the size of the parent div, which is the card-hotel, in what way can I solve it?
I tried putting this to the box-text class
background: url(https://cdn.mexicodestinos.com/hoteles/hotel-moon-palace-cancun-slide-princ-min.jpg) no-repeat fixed center;
background-size: cover;
position:absolute;
top:0;
bottom:0;
but now the information div is placed above box-text