I have tried a lot of the other answers on this particular topic. New to reactjs.
Load image:
import Background from '../images/background-small.jpg';
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
export class Register extends Component {
state = {
username: '',
email: '',
password: '',
password2: '',
};
static propTypes = {
register: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool
}
onSubmit = e => {
e.preventDefault();
const { username, email, password, password2 } = this.state;
if(password !== password2) {
this.props.createMessage({ passwordNotMatch: "Passwords do not match" });
} else{
const newUser = {
username,
email,
password
}
this.props.register(newUser);
}
};
onChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
if(this.props.isAuthenticated) {
return <Navigate to="/" />;
}
const { username, email, password, password2 } = this.state;
return (
<div style={{backgroundImage: "url(" + Background + ")", backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat' }} >
<div className="col-md-6 m-auto">
<div className = "card card-body mt-5">
<h2 className="text-center">Register</h2>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" name="username" onChange={this.onChange} value={username} />
</div>
<div className="form-group">
<label>Email</label>
<input type="email" className="form-control" name="email"
onChange={this.onChange} value={email} />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" name="password"
onChange={this.onChange} value={password} />
</div>
<div className="form-group">
<label>Confirm Password</label>
<input type="password" className="form-control" name="password2"
onChange={this.onChange} value={password2} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => ({
isAuthenticated: state.authReducer.isAuthenticated
});
export default connect(mapStateToProps, { register, createMessage })(Register);I have tried using css where I wrap the code in a .container and a lot of the answers I found. Somehow none of them make the background fullscreen. It would be great to understand the reason and how top control the background height width.
Edit:
If I am understanding this correctly: the height and width of the register form for lack of better word is making the background fit the dimensions of the form. How would I change this?
Edit 2:
Rendered html:
<div class="container">
<div style="background-image: url("http://127.0.0.1:8000/static/frontend/5e3641728b3f65a7cc8b0971bcba015e.jpg");
background-position: center center; background-size: cover; background-repeat: no-repeat;">
<div class="col-md-6 m-auto">
<div class="card card-body mt-5">
<h2 class="text-center">Register</h2><form>
<div class="form-group"><label>Username</label><input type="text" class="form-control" name="username" value="">
</div>
<div class="form-group"><label>Email</label><input type="email" class="form-control" name="email" value=""></div><div class="form-group"><label>Password</label><input type="password" class="form-control" name="password" value=""></div><div class="form-group"><label>Confirm Password</label><input type="password" class="form-control" name="password2" value=""></div><div class="form-group"><button type="submit" class="btn btn-primary">Register</button></div><p>Already have an account? <a href="#/login">Login</a></p></form></div></div></div></div>
css:
--bs-blue: #2780e3;
--bs-indigo: #6610f2;
--bs-purple: #613d7c;
--bs-pink: #e83e8c;
--bs-red: #ff0039;
--bs-orange: #f0ad4e;
--bs-yellow: #ff7518;
--bs-green: #3fb618;
--bs-teal: #20c997;
--bs-cyan: #9954bb;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #868e96;
--bs-gray-dark: #373a3c;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #868e96;
--bs-gray-700: #495057;
--bs-gray-800: #373a3c;
--bs-gray-900: #212529;
--bs-primary: #2780e3;
--bs-secondary: #373a3c;
--bs-success: #3fb618;
--bs-info: #9954bb;
--bs-warning: #ff7518;
--bs-danger: #ff0039;
--bs-light: #f8f9fa;
--bs-dark: #373a3c;
--bs-primary-rgb: 39,128,227;
--bs-secondary-rgb: 55,58,60;
--bs-success-rgb: 63,182,24;
--bs-info-rgb: 153,84,187;
--bs-warning-rgb: 255,117,24;
--bs-danger-rgb: 255,0,57;
--bs-light-rgb: 248,249,250;
--bs-dark-rgb: 55,58,60;
--bs-white-rgb: 255,255,255;
--bs-black-rgb: 0,0,0;
--bs-body-color-rgb: 55,58,60;
--bs-body-bg-rgb: 255,255,255;
--bs-font-sans-serif: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #373a3c;
--bs-body-bg: #fff;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-2xl: 2rem;
--bs-border-radius-pill: 50rem;
--bs-link-color: #2780e3;
--bs-link-hover-color: #1f66b6;
--bs-code-color: #e83e8c;
--bs-highlight-bg: #ffe3d1;
color-scheme: light;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto;
max-width: 1320px;