How to add a Login Form to an Image using HTML and CSS ?
The login form on an Image is used on many websites. Like hotels website that contains the pictures of the hotels or some organizations that organize some special events holding that events picture and login form on that. In that case, you can design a login or registration form on that picture. This design will make the website more attractive than a regular login or registration form. To create the login form on an Image you just need HTML and CSS. The below example will illustrate the approach of the concept.
Creating the Structure: In this section, we will create a basic website structure to create a login form on an Image.
- HTML code: HTML code is used to design the structure of the login form.
html
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div class="bg-img"> <h1>GeeksforGeeks</h1> <form class="container"> <b>Username</b> <input type="text" placeholder="Username Please" name="username" required> <b>Password</b> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit" class="button">Login</button> </form> </div></body></html> |
Designing the Structure: In the previous section, we have created the structure of the basic website. In this section, we will design the structure for the login form.
- CSS code of structure:
CSS
<style> body { height: 100%; font-family: Arial, sans-serif; } * { box-sizing: border-box; } h1 { text-align:center; color:green; -webkit-text-stroke: 1px black; } /* styling background image */ .bg-img { background-image: url( min-height: 380px; background-size: cover; } /* Styling the form container */ .container { position: absolute; left: 28px; top: 50px; margin: 20px; max-width: 300px; padding: 16px; } b { color: green; font-size:26px; -webkit-text-stroke: 1px black; } /* Full-width input */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 15px 0px; border: 2px solid green; } /* Styling the submit button */ .button { background-color: green; color: white; padding: 16px 16px; border: none; cursor: pointer; width: 100%; } .button:hover { transform: scale(1.1); transition: transform 0.3s; } </style> |
Combining the HTML and CSS code: This is the final code after combining the above two sections. You can see that the left align login form on the image is more attractive compared to a normal login form.
html
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { height: 100%; font-family: Arial, sans-serif; } * { box-sizing: border-box; } h1 { text-align:center; color:green; -webkit-text-stroke: 1px black; } /* styling background image */ .bg-img { background-image: url( min-height: 380px; background-size: cover; } /* Styling the form container */ .container { position: absolute; left: 28px; top: 50px; margin: 20px; max-width: 300px; padding: 16px; } b { color: green; font-size:26px; -webkit-text-stroke: 1px black; } /* Full-width input */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 15px 0px; border: 2px solid green; } /* Styling the submit button */ .button { background-color: green; color: white; padding: 16px 16px; border: none; cursor: pointer; width: 100%; } .button:hover { transform: scale(1.1); transition: transform 0.3s; } </style></head><body> <div class="bg-img"> <h1>GeeksforGeeks</h1> <form class="container"> <b>Username</b> <input type="text" placeholder="Username Please" name="username" required> <b>Password</b> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit" class="button">Login</button> </form> </div></body></html> |
Output:
Please Login to comment...