Background style not working on swiper js images

[zeroruntime]

I'm trying to add background style to my slider image but it doesn't seem to work
"background: linear-gradient(180deg,transparent 0,#000 100%);"

check here : https://codepen.io/Knightcore16/pen/oNMqvaV

[Arhell]

Hi, it works, just add padding to this property to check

.swiper-slide img {
    position: relative;
    display: block;
    width: 75%;
    height: 100%;
    object-fit: cover;
    background: blue linear-gradient(180deg,transparent 0,#000 100%);
    padding: 10px;
}

[zeroruntime]

I tried just now but it does not affects the image but rather around the image

[Arhell]

I understand you want to cover the background image?
if yes example

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="img-wrapper">
                <img src="https://taboracademy.s3.amazonaws.com/uploads/asset_image/2_31_hl.jpg?t=1674517914" alt="">
            </div>


        </div>
        <div class="swiper-slide"><div class="img-wrapper">
            <img src="https://taboracademy.s3.amazonaws.com/uploads/asset_image/2_31_hl.jpg?t=1674517914" alt="">
        </div></div>
        <div class="swiper-slide"><div class="img-wrapper">
            <img src="https://taboracademy.s3.amazonaws.com/uploads/asset_image/2_31_hl.jpg?t=1674517914" alt="">
        </div></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  padding: 60px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 auto;
}


.swiper-slide .img-wrapper {
  position: relative;
  width: 75%;
  height: 100%;
}

.swiper-slide .img-wrapper:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue linear-gradient(180deg,transparent 0,#000 100%);
  opacity: 50%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  margin: auto;
  object-fit: cover;
}

[zeroruntime]

Thanks a lot it worked🙏🏾🙏🏾