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>