How to add a linear gradient in the background image with bootstrap? - css

Question

This is a react app .I want to add a linear gradient of 0.7 on the background image with bootstrap. But how?
<Carousel.Item>
<img className='banner-bg d-block w-100 bg-dark bg-gradient ' src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg' ' />
<Carousel.Caption className='position-absolute top-0 start-0 text-start px-5 pt-5 mt-5 ms-5 '>
<h2 className='fw-bold display-4 px-5 '>
Get Your Amazing <br />
Car Solution
</h2>
<p className=' px-5'>Take payments online with a scalable platform that <br /> grows with your perfect business
</p>
<div className='lc-block d-grid gap-2 d-md-flex justify-content-md-start px-5'>
<a className='btn btn-danger px-4 me-md-2' href='#' role='button'>About Us</a>
<a className='btn btn-outline-secondary px-4' href='#' role='button'>Latest Projects</a>
</div>
</Carousel.Caption>
</Carousel.Item>

Answer 1

All you need to do is to add a .bg-gradient class to the element (a linear gradient will be added as background image to the backgrounds).
If you want to add in your custom CSS class,
Just add below line:
background-image: var(--bs-gradient);
You can target bootstrap gradient with below style in React:
style={{
backgroundImage: linear-gradient( 170deg, var(--bs-gradient), 'navy' )
}}
OR
Replace you image tag with below tag:
<img style={{backgroundImage:linear-gradient(170deg,var(--bs-gradient),'navy')}} className='banner-bg d-block w-100 bg-dark bg-gradient ' src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg' ' />
If above code worked, change linear-gradient property values as per your requirement.