Я не могу установить свойство фонового изображения для div

Question

У меня довольно тривиальная проблема CSS, которую я не могу решить. Я хочу установить фоновое изображение моей целевой страницы в виде файла, сохраненного в моем каталоге с именем "ball.jpg ", но когда я устанавливаю свойство background-image для div регистрации, он показывает белый экран, но настройка свойства с помощью селектора тела работает .

CSS

.form {
  background-image: url('../basketball.jpg');
  background-size: cover;
}

JSX

  <form className="signup-form">
        <div className="form">
          <div className="signup">
            <h3 className="header">Create your free Basketball Guru account</h3>
              <div className="form-group center-block">
                <label for="name"></label>
                <input type="name" className="form-control login" placeholder="Username" />
              </div>
              <div className="form-group">
                <label for="password"></label>
                <input type="password" className="form-control password" placeholder="Password" />
              </div>
              <button type="submit" className="btn btn-primary">Submit</button>
              <p className="form-snippet">Already signed up? Log in</p>
            </div>
            </div>
        </form>

Answer 1

Попробуйте поместить basketball.jpg в вашу папку publi c, а затем получить к ней доступ в вашей css следующим образом:

.signup-form {
   background-image: url("/basketball.jpg");
   background-size: cover;
}

Это связано с тем, как React связывает файлы стилей, все это попадает в папку public и ваш путь не работает.