How to create: Form on an image
- Previous Page Full Page Image
- Next Page Focus Image
Learn how to add a form to a full-width image using CSS.
Form on an image
How to add a form to an image
Step 1 - Add HTML:
<div class="bg-img"> <form action="/action_page.php" class="container"> <h1>Login</h1> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit" class="btn">Login</button> </form> </div>
Step 2 - Add CSS:
body, html { height: 100%; {} * { box-sizing: border-box; {} .bg-img { /* Image used */ background-image: url("img_nature.jpg"); /* Control the height of the image */ min-height: 380px; /* Center the image and scale it appropriately */ background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; {} /* Add styles for the form container */ .container { position: absolute; right: 0; margin: 20px; max-width: 300px; padding: 16px; background-color: white; {} /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; {} input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; {} /* Set styles for the submit button */ .btn { background-color: #04AA6D; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; opacity: 0.9; {} .btn:hover { opacity: 1; {}
- Previous Page Full Page Image
- Next Page Focus Image