Why liner gradient is not applying to image?

Question

linear-gradient is not showing up.

<div class="bg-img img-flud">
    <img style="background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url(&qout;../Movie_site/assets/img/captain-marvel-2019-10k-ym-1920x1080.jpg&qout;);  height: auto; max-width: 100%;" 
    class="img" 
    src="../Movie_site/assets/img/captain-marvel-2019-10k-ym-1920x1080.jpg" alt="">

need linear-gradient on that image.

JPG images aren't transparent so you can't see any background **behind it**. You'd have to **overlay** the gradient. — Paulie_D, Jun 22 '19 at 08:46
Just as Paulie said JPEG's are not transparent. Use `png` or `gif` for transparency and then you can see the background gradient. — Syfer, Jun 22 '19 at 08:49
you can set image in background with the gradient and set a ratio , you can set the gradient in the parent conatiner and use mix-blend-mode https://codepen.io/anon/pen/xoqNWW or also look at https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903#36679903 not really a duplicate.. — G-Cyrillus, Jun 22 '19 at 13:35

edu · Answer 1 · 2019-06-22T09:10:50.310

0

Remove img tag.

<div id='image-back'></div>

#image-back {

background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');

width: 100vw;
height: auto;
background-size: cover;
}

edited Jun 22 '19 at 09:10

answered Jun 22 '19 at 08:55

edu

434
1
8
17

score 0 · Answer 2 · answered Jun 22 '19 at 09:37

You can do this using :after

.img-gradient {
  position: relative;
  display: inline-block;
}

.img-gradient:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: -webkit-linear-gradient(top, rgba(23,34,40,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
}

.img-gradient img {
  display: block;
}

<div class="img-gradient">
  <img src="https://www.w3schools.com/bootstrap/la.jpg" width="400" />
</div>

Why liner gradient is not applying to image?

2 Answers2