React js css class background image not visible
<p>I have added a class in react component.<br>
CSS file:</p>

<pre><code>.bg{
   background: url('../img/bg.jpg');
   border: 2px solid black;
}
</code></pre>

<p>React render method:</p>

<pre><code>  render() {
   return (
    &lt;div&gt;
      &lt;div className="bg"&gt;
       Hey This
      &lt;/div&gt;
    &lt;/div&gt;
  );
}
</code></pre>

<p>The browser shows the border and loads the image but image is not visible.</p>

<p>The screenshot is as follows: 
<a href="https://i.stack.imgur.com/8ijpJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8ijpJ.png" alt="enter image description here"></a></p>

<p>Can anyone tell me what I am doing wrong?</p>