https://i.sstatic.net/pp8iy.png
my code
<div style="background-image: url('{{ asset('img/background-line.svg') }}')">
<div class="row my-10 justify-content-center">
<div class="col-auto">
<div class="card border-0 rounded-0 rounded-top">
<div class="card-body py-5">
<ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold p-0">
<li class="breadcrumb-item">
<a href="#" class="text-muted"><i class="fa fa-home"></i></a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-muted">Layanan Investasi</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-muted">Sektor Aneka ET</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>how do I center this and apply a background image using CSS Bootstrap so that the breadcrumb is fixed in the center?