Я пытаюсь добавить разные фоновые изображения на разные страницы моего приложения реагирования. Может ли кто-нибудь мне ⇐ CSS

[Anonymous]

Изначально я установил фоновое изображение моей первой страницы «login.jsx», и когда он переходит на другую страницу «verification.jsx», фоновое изображение другой страницы не соответствует размеру всей веб-страницы, пробовал разные варианты. css, чтобы иметь разное фоновое изображение для разных страниц, но это не сработало. Может ли кто-нибудь помочь мне с этой проблемой...
это файл login.jsx

Код: Выделить всё

import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import './Login.css';
import bg from '../../assets/login-background.png';

function Login() {
let [uname, setUname] = useState("");
let [pwd, setPwd] = useState("");
const nav = useNavigate();

const validate = () => {
console.log(uname, pwd);
if(uname.toLowerCase() === 'aisu' && pwd.toLowerCase() === 'aisu') {
nav('/verification');
} else {
nav('/');
}
}

return (

Login

username : 
 setUname(event.target.value)}
required
/>

password : 
 setPwd(event.target.value)}
required
/>

 login 


);
}

export default Login;

а это файл login.css

Код: Выделить всё

@import url(https://fonts.googleapis.com/css?family=Poiret+One|Lobster|Chewy|Anton|Shadows+Into+Light|Open+Sans|Roboto|Orbitron|Oswald|Raleway|Montserrat|Roboto+Slab|Indie+Flower|Fjalla+One|Bree+Serif|Pacifico|Abril+Fatface);

body {
background-image: url('../../assets/login-background.png');
background-size: 1640px;
background-repeat: no-repeat;
background-position: center;

}

.form-container {
text-align: center;
margin-top: 10%;
width: 300px;
height: 400px;
background-color: rgba(6, 6, 27, 0.322);
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 0px 0px 20px 10px black;
}

.form-title {
margin-bottom: 70px;
margin-top: 10%;
font-family:'Pacifico';
font-size: 42px;
}

label {
font-size: 22px;
margin-bottom: 40px;
font-family: 'Shadows Into Light';
}

input {
margin-bottom: 40px;
border-radius: 10px;
cursor: pointer;
}

button {
border-radius: 20px;
padding: 7px;
width: 70px;
}

button:hover {
color: rgb(229, 91, 137);
box-shadow: 5px 10px 10px 2px rgb(243, 135, 171);
}

страница проверки.jsx выглядит следующим образом

Код: Выделить всё

import React from 'react';
import './Verification.css';

function Verification() {
return (

Verification


)
}

export default Verification;

и страницаverification.css выглядит следующим образом

Код: Выделить всё

body.verification {
background-color: aqua;
background-size: 1640px;
background-repeat: no-repeat;
background-position: center;
background-image: url('https://images.pexels.com/photos/593655/pexels-photo-593655.jpeg?cs=srgb&dl=pexels-jovana-nesic-188639-593655.jpg&fm=jpg');

}

пробовал различные стили CSS, такие как изменение положения размера фона и т. д., но не смог решить проблему.

Подробнее здесь: https://stackoverflow.com/questions/784 ... react-appl