I have a background, but im also trying to get my form to just fit on the screen so it's not going past the screen.
Here is the code for the background image
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://i.imgur.com/qnxtJse.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
Here is the code for the form. You can vist https://drivealongapp.com/dashboard/page-register.php
And see what I'm talking about. I want it to just be in the image area. and not go past it.
<!-- Main wrapper -->
<div id="main-wrapper">
<div class="unix-login">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="login-content card">
<center><h3>Register Account</h3>
<p><strong>Create Account</strong> » Purchase » Begin</p></center>
<div class="login-form">
<form data-toggle="validator" method="post" id="register_form">
<div class="form-group">
<label>Name</label>
<input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
<div class="form-group">
<label>Age</label>
<input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>
<div class="form-group">
<label>Email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Password</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>
<div class="help-block"></div>
</div>
<div class="form-group">
<label>Choose Your Course</label>
<select name="course" class="form-control">
<option value="0" selected>Texas Parent Taught Drivers Ed</option>
<option value="1">Texas Instructor Taught Drivers Ed</option>
<option value="2">Texas Adult Drivers Ed</option>
</select>
</div>
<div class="form-group">
<label>Referral</label>
<input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">
</div>
<div class="form-group checkbox">
<label>
<input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy
</label>
<div class="help-block with-errors"></div>
</div>
<button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>
<div class="register-link m-t-15 text-center">
<p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I just removed all the labels. If you want to change something else let me know
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <!-- Main wrapper --> <div id="main-wrapper"> <div class="unix-login"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-lg-4"> <div class="login-content card"> <center> <h3>Register Account</h3> <p><strong>Create Account</strong> » Purchase » Begin</p> </center> <div class="login-form"> <form data-toggle="validator" method="post" id="register_form"> <div class="form-group"> <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required> </div> <div class="form-group"> <input type="dob" id="age" name="age" class="form-control" placeholder="AGE (03/26/2001)" required></div> <div class="form-group"> <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required> <div class="help-block with-errors"></div> </div> <div class="form-group"> <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required> <div class="help-block"></div> </div> <div class="form-group"> <select name="course" class="form-control"> <option value="0" selected>CHOOSE COURSE</option> <option value="1" selected>Texas Parent Taught Drivers Ed</option> <option value="2">Texas Instructor Taught Drivers Ed</option> <option value="3">Texas Adult Drivers Ed</option> </select> </div> <div class="form-group"> <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>"> </div> <div class="form-group checkbox"> <label> <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy </label> <div class="help-block with-errors"></div> </div> <button name="register" type="submit" class="btn btn-primary btn-flat mb-30 mt-30">Register</button> <div class="register-link mt-15 text-center"> <p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p> </div> </form> </div> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.