Position cards on top of image in the background?

Asked

Viewed 436 times

0

How do I place a Row with some cards on top of another Row with background image? I’ve used position:Bsolute but when I put the screen to the responsive all positioning is lost. Could someone help me solve my problem and take the opportunity to give tips on how I do to position information in front of an image (background) without changing the positioning in the responsive. 

.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>
css twitter-bootstrap

1 answer

1


Face the structure you’ve set up is quite wrong...

You need that order: container-fluid > row > col-12 > card-deck > card

This is the official BS documentation on how to use the cards https://getbootstrap.com/docs/4.4/components/card/

The background you put in the row, and you need a div with class card-deck to place the cards next to each other. In cards you place the class w-100 for when break the columns they occupy the whole width of the screen and will look like in the image below

inserir a descrição da imagem aqui

Follows the code:

<!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

    Thank you so much for the tips @hugocsl.

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.