0

Como eu faço para colocar uma row com alguns cards por cima de outra row com imagem em background? Eu já usei o position:absolute mas quando eu coloco a tela para o responsivo todo o posicionamento é perdido. Alguém poderia me ajudar a resolver o meu problema e aproveitar para dar dicas de como eu faço para posicionar uma informação na frente de uma imagem (background) sem alteração do posicionamento no responsivo.

.bac{
  background: url('https://conteudoproduto.magazineluiza.com.br/22/224713300/assets/img/qualidade-4k.jpg') no-repeat center center fixed;
   height: 100vh;
   }

html

     <div class="container-fluid">

    <div class="row">
           <div class="col-12 bac">
           </div>
     </div>

    <div class="row">
       <div class="col-4">
       <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 class="col-4">
       <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 class="col-4">
       <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>

1 Resposta 1

1

Cara a estrutura que vc montou está bem equivocada...

Vc precisa dessa ordem: container-fluid > row > col-12 > card-deck > card

Essa é a documentação oficial do BS sobre como usar os cards https://getbootstrap.com/docs/4.4/components/card/

O background vc coloca na row, e vc precisa de uma div com a classe card-deck para colocar os cards um ao lado do outro. Nos cards vc coloca a classe w-100 para quando quebrar as colunas eles ocuparem toda a largura da tela e vai ficar como na imagem abaixo

inserir a descrição da imagem aqui

Segue o código:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  .bac {
    background: url('https://conteudoproduto.magazineluiza.com.br/22/224713300/assets/img/qualidade-4k.jpg') no-repeat center center fixed;
    height: 100vh;
  }
</style>
</head>

<body>

  <div class="container-fluid">

    <div class="row bac">
      <div class="col-12">

        <div class="card-deck align-content-start justify-content-center">
          <div class="card w-100" 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 class="card w-100" 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 class="card w-100" 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>

</body>

</html>

1
  • 1
    Muito obrigado pelas dicas @hugocsl. 7/05/2020 às 12:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .