Why background image is not appearing in Carousel?

Question

I am using this carousel react-responsive-carousel for my demo application. But my carousel background image is not displayed properly. Here is my code

https://codesandbox.io/s/late-moon-d27jc?file=/src/App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
export default function App() {
  return (
    <div className="App">
      <Carousel>
        <div
          style={{
            backgroundImage:
              'url("https://st.depositphotos.com/1073642/1263/i/600/depositphotos_12639328-stock-photo-glass-of-water-isolated-on.jpg")'
          }}
        >
          <div>1</div>
        </div>
        <div
          style={{
            backgroundImage:
              'url("https://images-na.ssl-images-amazon.com/images/I/61uYglgYmgL._SY550_.jpg")'
          }}
        >
          <div>2</div>
        </div>
        <div
          style={{
            backgroundImage:
              'url("https://www.shaze.in/pub/media/catalog/product/w/i/wine-glasse--_2__1.jpg")'
          }}
        >
          <div>3</div>
        </div>
      </Carousel>
    </div>
  );
}

Answer 1

You'll need to tweak some other parent class dimensions to get it just right, but this should at least get you going and answer your question why the images aren't showing: you need to give them height and width. Add the dimensions you want to each of the style tags and you'll be on your way. Of course, you should probably move these into a stylesheet at some point. :)

      style={{
        'height': '400px',
        'width': '300px',
        'backgroundSize': 'cover',
        backgroundImage: 'url("https://st.depositphotos.com/1073642/1263/i/600/depositphotos_12639328-stock-photo-glass-of-water-isolated-on.jpg")'
      }}