0

quiero poner unas cards de boostrap en mi proyecto y soy incapaz de meterlas dentro de la imagen y no se por donde empezar a tocar.

He probado con z-index, tambien con la posicion absoluta (claro que pierde el modo responsive y todo) y como la imagen esta en un img-fluid tambien perderia el modo responsive si la meto en un bg-img: url().

Se queda siempre debajo de la imagen, haga lo que haga

Muchas gracias

 <div class="container-fluid px-0 main">
  <img src="../../assets/homeImg/img3.jpg" class="img-fluid">
  <div class="container cards">
    <div class="row">
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>          
     </div>
    </div>
   </div>
  </div>

y esto en css:

.main {
  position: relative;
}

.img-fluid {
  display: block;
  z-index: 0;
  -webkit-filter: blur(3px);
}

3 respuestas 3

0

Puedes aplicar un margen negativo al contenedor de las cards:

.cards{
    margin-top: -100px
}
0

Siempre puedes asignar el fondo a la clase main, usando la propiedad background-image y pasándole la ruta.

Doy por hecho que se trata de una landing page, así que lo normal es usar un fondo que ocupe todo el ancho y alto, si este es tu caso, el código que te paso tiene que adaptarse perfectamente.

CSS

.main {
    position: relative;
    background-image: url('img3.jpg');
    background-size: cover;
    background-position: 50%;
    width: 100vw;
    height: 100vh;
}

/*.img-fluid {
  display: block;
  z-index: 0;
  -webkit-filter: blur(3px);
}*/

HTML

<div class="container-fluid px-0 main">
    <!-- <img src="img3.jpg" class="img-fluid"> -->
    <div class="container cards">
      <div class="row">
        <div class="col">
          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>          
       </div>
      </div>
     </div>
    </div>

Ejecuta esto y después pulsa sobre pantalla completa, debería funcionar como esperas.

.main {
  position: relative;
  background-image: url('https://512pixels.net/downloads/macos-wallpapers/10-14-Night.jpg');
  background-size: cover;
  background-position: 50%;
  width: 100vw;
  height: 100vh;
}

/*.img-fluid {
  display: block;
  z-index: 0;
  -webkit-filter: blur(3px);
}*/
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <div class="container-fluid px-0 main">
        <!-- <img src="img3.jpg" class="img-fluid"> -->
        <div class="container cards">
          <div class="row">
            <div class="col">
              <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                    content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>          
           </div>
          </div>
         </div>
        </div>

0

Lo único que tenes que hacer es asignarle a .main el valor de position: relative; y a .cards el valor de position: abosulete;, luego dándole los tamaños de 100% tanto de width como height para que se acomoden a toda la imagen, también dentro de .cards añádele el div contendor así se posiciona sobre el y podes trabajar con tus diseños tranquilamente.

html

<div class="container-fluid px-0 main">
  <img src="../../assets/homeImg/img3.jpg" class="img-fluid">
  <div class="cards">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>         
        </div>
      </div>
    </div>
  </div>
</div>

css

.main {
  position: relative;
}
.cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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