I've been working on the code for a login page, but I'm having trouble setting a background image for the page. I know how to set it for the whole application by modifying the app component, but when I try to do the same for this specific component, only the component itself gets the background image and not the entire page. I have imported the image for this purpose.
import React, { useState } from "react";
import "./Loginp.css";
import axios from "axios";
import bgimg from "../../assets/Loginimage.jpg";
function Loginp() {
const [usernamed, setusername] = useState("");
const [passwordd, setpassword] = useState("");
let check = false;
function clicki() {
console.log("clicked");
const dat = {
username: usernamed,
password: passwordd,
};
axios.post("http://localhost:7000/login", dat).then((resp) => {
check = resp.data;
});
if (check) {
alert("User name already exists");
}
}
return (
<div
id="loginform"
style={{
backgroundImage: bgimg,
height: 100,
marginTop: 10,
textAlign: "center",
}}
>
<FormHeader title="Login" />
{/* <Form /> */}
<div>
<div class="row">
<label>Username</label>
<input
type="text"
placeholder="Enter your username"
onChange={(e) => {
setusername(e.target.value);
}}
/>
</div>
<div class="row">
<label>Password</label>
<input
type="text"
placeholder="Enter your password"
onChange={(e) => {
setpassword(e.target.value);
}}
/>
</div>
<div id="button" class="row">
<button onClick={clicki}>Log in</button>
</div>
</div>
</div>
);
}
const FormHeader = (props) => <h2 id="headerTitle">{props.title}</h2>;
export default Loginp;