title: How to add a linear gradient to a background image in ReactJs
body: <p>I am making a movie search app using Reactjs, Axios, and MovieDB API. I am currently getting my background image for the API using the following code: </p>
  
  <pre><code>const backgroundStyle = {
         backgroundImage: `url(https://image.tmdb.org/t/p/w500${this.state.background})`,
         backgroundSize: "cover",
         height: "100vh"
       }
  </code></pre>
  
  <p>I would like to add a linear gradient to the background image but when I try to do:</p>
  
  <pre><code>background: linear-gradient
  </code></pre>
  
  <p>or</p>
  
  <pre><code>background: linearGradient
  </code></pre>
  
  <p>it is still yeallow in react, I am not sure how to implement this. The code I want to use is:</p>
  
  <pre><code>linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), `url(https://image.tmdb.org/t/p/w500${this.state.background})`;
  </code></pre>
  
  <p>But put into Reactjs format.</p>
  
  <p>The full code is here:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import '../CSS/style.css'
  
  export default class Movielist extends React.Component {
    state = {
      title: "",
      popularity: "",
      poster: "",
      background: "",
    }
  
      clickHandler = (event) =&gt; {
          if (event.keyCode === 13) {
             const query = event.target.value;
             const API_KEY = 'caf02a958f137f43327649b2b8721302';
      axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&amp;query=${query}`)
        .then(res =&gt; {
          const title = res.data['results'][0]['title'];
          this.setState({ title });
  
          const popularity = res.data['results'][0]['popularity']
          this.setState({ popularity });
  
          const poster = res.data['results'][0]['poster_path']
          this.setState({ poster });
  
          const background = res.data['results'][0]['backdrop_path']
          this.setState({ background })
  
  
        })
          }
      }
  
    render() {
      const backgroundStyle = {
         backgroundImage: `url(https://image.tmdb.org/t/p/w500${this.state.background})`,
         backgroundSize: "cover",
         height: "100vh"
       }
  
      return (
        &lt;div id="main-div" style={backgroundStyle}&gt;
          &lt;div id="second-div"&gt;
           &lt;input type="search" id="search" onKeyDown={event =&gt; this.clickHandler(event)} /&gt;
           &lt;h1 id="title"&gt;Title: {this.state.title}&lt;/h1&gt;
           &lt;h1 id="popularity"&gt;Popularity: {this.state.popularity}&lt;/h1&gt;
           &lt;img id="poster" src={`https://image.tmdb.org/t/p/w300${this.state.poster}`} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      )
    }
  }
  </code></pre>