Lo que hice fue crear un nuevo div
adentro del card-body
y justo antes del div
que encierra a todo el contenido de tu card
:
<div id="app" class="container-fluid p-4">
<div class="card bg-transparent border-0 h-100">
<div class="card-body undefined">
<div class="fondo"></div> <!-- este div lo creo -->
<div>
<!-- aquí va el contenido de tu card -->
</div>
</div>
</div>
</div>
Y a la clase del nuevo div
, llamado fondo
, le di las siguientes propiedades:
.fondo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://i.imgur.com/wBWzOZo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.3;
z-index: -1;
}
En donde:
position: absolute
: La posición del elemento será absoluta y cubrirá todo el card.
background-image
: Será la imagen que ocupará el fondo del elemento.
background-repeat: no-repeat
: Indico que la imagen no se repetirá.
background-size: cover
: Renderizo la imagen para que ocupe el tamaño del card.
opacity: 0.3
: Le aplico opacidad a la imagen.
z-index: -1
: El elemento estará detrás del todo.
En resumen, estoy creando un nuevo div
, en donde este div
ocupará todo el card
. También tendrá una imagen de fondo, una opacidad y su ubicación estará atrás del todo para que la opacidad no afecte al contenido del card
.
PSDT: Cuando estamos ubicándolo detrás del todo al elemento con la imagen, ese elemento lo podremos ver gracias a la clase bg-transparent
que tiene el card
, ya que con esto indicamos que el background
del card
es transparente, y dicho a esto, podemos ver lo que hay detrás de él (o sea, vemos el elemento con la imagen).
Código completo:
.fondo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://i.imgur.com/wBWzOZo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.3;
z-index: -1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="app" class="container-fluid p-4">
<div class="card bg-transparent border-0 h-100">
<div class="card-body undefined">
<div class="fondo"></div>
<div>
<div class="d-flex justify-content-center align-items-center flex-column mb-5">
<img src="https://i.imgur.com/wBWzOZo.png" class="my-4" style="max-width: 50%;">
<h4>Crear cuenta</h4>
</div>
<div class="row justify-content-center">
<div class="col-10 col-sm-10 col-md-8 col-lg-6 col-xl-5">
<form> Here all my code </form>
</div>
</div>
</div>
</div>
</div>
</div>
Puedes ver mejor los resultados en este enlace.