طراحی مطابق تصویر بصورت ریسپانسیو

[somaye-s]

سلام
دوستان یک طرح دارم بصورت عکس پیوست شده که یک عکس پس زمینه تمام صفحه داره، این عکس از نصفه به پایین بک گراند کامل تیره باید بگیره.

من عکس و باکس های وسط رو طراحی کردم ولی قسمت تیره رو نمی دونم به چه شکلی بذارم :(
کسی میتونه کمک کنه؟؟

tempsnip.jpg

<div class="container-fluid way-of-success-panel">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="d-block text-center pt-5 pb-sm-2 pb-md-2 mb-5 mb-md-2">تسسسسسسسسسسسسسسسسسست</h3>
</div>
</div>
<div class="row">
<div class="card-group mt-5 pt-md-5 pt-lg-5 mt-md-5 d-inline-flex">
<div class="col-sm-6 col-md-6 mb-2 col-lg-3 mt-sm-1 mt-md-5 ">
<div class="card border-0">
<img class="card-img-top img-fluid wow animate__animated animate__fadeInBottomRight animate__fast" src="assets/img/test.png" alt="تسسسسسسسسسسسسسسسسسست">
<div class="card-body bg-warning text-white">
<h5 class="card-title text-center">تسسسسسسسسسسسسسسسسسست</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 mb-2 col-lg-3 mt-sm-1 mt-md-5 ">
<div class="card border-0">
<img class="card-img-top img-fluid wow animate__animated animate__fadeInUp animate__fast" src="assets/img/test.png" alt="تسسسسسسسسسسسسسسسسسست">
<div class="card-body bg-danger text-white">
<h5 class="card-title text-center">تسسسسسسسسسسسسسسسسسست</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 mb-2 col-lg-3 mt-sm-1 mt-md-5 ">
<div class="card border-0">
<img class="card-img-top img-fluid wow animate__animated animate__fadeInDown animate__fast" src="assets/img/test.png" alt="تسسسسسسسسسسسسسسسسسست">
<div class="card-body bg-success text-white">
<h5 class="card-title text-center">تسسسسسسسسسسسسسسسسسست</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 mb-2 col-lg-3 mt-sm-1 mt-md-5 ">
<div class="card border-0">
<img class="card-img-top img-fluid wow animate__animated animate__fadeInBottomRight animate__fast" src="assets/img/test.png" alt="تسسسسسسسسسسسسسسسسسست">
<div class="card-body bg-primary text-white">
<h5 class="card-title text-center">تسسسسسسسسسسسسسسسسسست</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-4 pt-4">
<div class="col-9 text-center">
<p class=" text-dark">تسسسسسسسسسسسسسسسسسست
</p>
</div>
</div>
</div>
</div>

[ASHKANLAEI]

نمیتونید از linear-gradient استفاده کنید؟
مثلا اگه کد سی اس اس رو این طوری دادید:

#background {

background-image: url(./bg.jpg);

background-size: cover;

}

به این کد تغییرش بدین:

#background {

background-image: linear-gradient(transparent 60%, black 60%), url(./bg.jpg);

background-size: cover;

}