title: I can't see linear-gradient in my image but it works in other elements
body: <p>I'm working in a react project, it's like a Netflix. I have this image and I want to put background linear-gradient but nothing changes... (I'm using moviedb api)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>            &lt;div className='popular-movies'&gt;
                  &lt;div className='suggestions'&gt;
                      &lt;section className='movie-suggested'&gt;
                          &lt;img src={urlFromImg + "/w500/" + suggestionsMovies[1].backdrop_path} alt="Imagen de fondo" className='back-img'/&gt;
                          &lt;img src={require('../symbols/item-symbols/play-suggested.svg').default} alt="Play" className='play-icon'/&gt;
                          &lt;p&gt;{suggestionsMovies[1].original_title}&lt;/p&gt;
                      &lt;/section&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to put a linear gradiant in the first img. I'm trying this:<br />
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.78%, #000000 122.69%)</p>
  <p>This is my css (the most relevant for this):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.popular-movies{
      position: absolute;
      right: 101px;
      top: 251px;
      cursor: pointer;
  }
  
  .movie-suggested{
      width: 330px;
      height: 195px;
      margin-bottom: 20px;
      position: relative;
  }
  
  .back-img{
      width: 100%;
      height: 200px;
      border-radius: 10px;   
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.78%, #000000 122.69%);
  
   
  }
  .play-icon{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  .movie-suggested p{
      position: absolute;
      top: calc(50% + 45px);
      left: 50%;
      transform: translate(-50%, -50%);
      text-transform: uppercase;
      color: #FFFFFF;
      font-family: bebas-neue, sans-serif;
      text-align: center;
      font-size: 16px;
      line-height: 16px;
      letter-spacing: 4px;
      width: 70%;    
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The funny thing (and I don't know why) is if I put the background that I mention before in the .play-icon or the p inside the movie-suggested I can see it! but if I select back-img nothing happens</p>
  <p>I im stuck with this for too many hours and I don't get it! Thanks for the help ;)</p>