how to flip a bootstrap background image

Question

I have a navbar and a row in bootstrap5 and I want to flip the background image of the section which is the parent of these two. I know that I can use <<transform: scaleX(-1)>> but it flips all the container.is it possible to do it or not? also is there any way to not use inline style for background image in bootstrap? I have try to give the background image in CSS but it doesn't work.

<section class="bg-image" style="background-image:url('.....')">
  <nav class=navbar>
    ......
   </nav>
   <div class="row">
    .....
    </div>
 </section>

Answer 1

use :before selector like below
wait for loading image background

.bg-image {
  z-index: 100 !important;
  color: #f1eeeef9;
}

.bg-image:before {
    content:"";
    position: absolute;
    display: inline-block;
    z-index: -1;
    width:100%;
    height:80px;
    background:url('https://picsum.photos/600/80');
    transform:scaleX(-1);
    background-repeat: no-repeat;
    background-size: cover;
}

<section class="bg-image">
  <nav class=navbar>
    <h2>Navbar</h2>
   </nav>
   <div class="row">
    .....
    </div>
 </section>