3

Estoy intentando crear una card de boostrap cuyo fondo sea una imagen que ocupe el 100% y sea casi transparente sin que afecte el resto de elementos. De momento no lo he logrado.

<div id="app" class="container-fluid">
   <div class="card bg-transparent border-0 h-100">
      <div class="card-body undefined">
         <div>
            <img src="http://mi.imagen.local/bg.jpg" alt="Card image" class="bg-img"> 
            <div class="d-flex justify-content-center align-items-center flex-column mb-5">
               <img src="logo.jpg" class="my-4" style="max-width: 350px;"> 
               <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>

También he intentado añadir la imagen como background del div y no funciona (afecta al resto de elementos)

1 respuesta 1

3

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.