Set a different image for each page than the image on another page

I created a project in react and in my files there are several css files for example loginPage.css, tradingPage.css,
app.css…
If I put a background image for the body, it changes on all pages and I try to be more specific, but I can’t do it on the entire height of the page, for example I tried to create a div that would wrap the entire page and then set a background image for it, and still it didn’t work, the background image was just The div is not the entire length of the page,
Does anyone have an idea how to do this more specifically.
Thanks to all who answer :).

LoginPage.jsx file:

 <div className="login-form-container">
       
      <h2>{isSignIn ? 'Sign In' : 'Sign Up'}</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />

        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />

        <br /><button type="submit">{isSignIn ? 'Sign In' : 'Sign Up'}</button>
      </form>

      <p>
        {isSignIn ? "Don't have an account? " : 'Already have an account? '}
        <button type="button" onClick={() => setIsSignIn(!isSignIn)}>
          {isSignIn ? 'Sign Up' : 'Sign In'}
        </button>
      </p>
    </div>
  );
}

css file :

.login-form-container {
  background-image: url('https://a.c-dn.net/c/content/dam/igcom-websites/sv_SE/images/brochure-                    pages/hero-images/2023/08/18/Trade_Analytics_promotion_HP_Banner_1440px_x720px.png');
    width: 500px;
    height: 500px;
    margin-top: 200px;
    margin-left: 40px;
    padding: 20px;
   
  }