CODEWITHSUNDEEP
htmlcss
fj785
fj785

Reputation: 133

I am unable to set a background image property for a div

I'm having a fairly trivial CSS issue that I can't solve. I want to set my landing page's background image as a file saved in my directory called "basketball.jpg" but when I set the background-image property for the sign up div it shows a white screen but setting the property with a body selector works.

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>

enter image description here

Upvotes: 0

Views: 65

Answers (1)

royranger
royranger

Reputation: 374

Try putting basketball.jpg in your public folder, and then access it in your css like this:

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

It's due to the way React bundles the styling files, it all ends up in the public folder and so your path didn't work.

Upvotes: 1

Related Questions