HTML
<div class="row Home">
<div
class="col right"
style="background-image: url('./Images/car-2797169_1280.jpg')"
>
<div class="elementsOverlay d-flex justify-content-center align-items-center">
<div class="d-flex flex-column-reverse">
<div class="ps-4 mt-4">
<button type="button" class="btn bookNow">Book Now</button>
</div>
<div class="ps-4 pt-5 pe-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
gravida nisl eget massa commodo, condimentum pharetra purus malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
convallis id dolor nec dictum. Sed mollis scelerisque condimentum.
Quisque viverra nisl vel diam hendrerit vestibulum. Cras augue ligula,
consectetur eu eleifend a, viverra cursus dolor. Fusce gravida et
lectus ut mollis. Donec pulvinar felis finibus mauris pretium
efficitur. Donec in dui condimentum nunc tempus ultricies
</div>
</div>
</div>
</div>`
CSS
.right {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
opacity: 0.5;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgb(47, 45, 45);
}
.elementsOverlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
I've attempted to implement the methods suggested in other Stack Overflow threads by using argb to adjust the opacity, but unfortunately, it didn't have any effect on my website.
.elementsOverlay { background-color: rgba(0, 0, 0, 0.6) !important; }Your assistance is greatly appreciated!