How to add a Login Form to an Image using HTML and CSS ?

21 May, 2021
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("https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png");            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("https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png");            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:  
 
sumitgumber28
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property