title: Adding full screen background in react-slick carousel
body: <p>I am using react-slick to create a full screen slider, but I am stuck at adding a image in the background.</p>
  <p>I am using the following.</p>
  <pre class="lang-js prettyprint-override"><code>    import image1 from &quot;../assets/bg1.png&quot;
      import image2 from &quot;../assets/audit.png&quot;
      import image3 from &quot;../assets/logo.png&quot;
      
      const data = [
        {
          image: image1,
          content: {
            title: &quot;First Slide&quot;,
            title2: &quot;balh22&quot;,
          },
        },
        {
          image: image2,
          content: {
            title: &quot;Second Slide&quot;,
            title2: &quot;balh22&quot;,
          },
        },
        {
          image: image3,
          content: {
            title: &quot;Third Slide&quot;,
            title2: &quot;balh22&quot;,
          },
        },
      ]
  
  
      const ValueProp = props =&gt; {
      
        const slides= () =&gt;
          data.map(d =&gt; (
            &lt;div style={{ backgroundImage: d.image }}&gt;
              {/* &lt;img src={d.image} /&gt; */}
              &lt;h1&gt;{d.content.title}&lt;/h1&gt;
            &lt;/div&gt;
          ))
      
        return (
        
          &lt;Slider style={{ height: &quot;100vh&quot; }} autoplay={true} dots={true}&gt;
            {slides()}
          &lt;/Slider&gt;
        )
      }
  </code></pre>
  <p>I did this, but I am not able to add images to background. The data array will have multiple images later on, but for now I just want to show the full screen background image.</p>
  <p>How can I achieve this?</p>