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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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="buttn">Login</button>
            </form>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

        <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 */
            .buttn {
                background-color: green;
                color: white;
                padding: 16px 16px;
                border: none;
                cursor: pointer;
                width: 100%;
            }
              
            .buttn:hover {
                transform: scale(1.1);
                transition: transform 0.3s;
            }
        </style>

    chevron_right

    
    

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 */
        .buttn {
            background-color: green;
            color: white;
            padding: 16px 16px;
            border: none;
            cursor: pointer;
            width: 100%;
        }
          
        .buttn: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="buttn">Login</button>
        </form>
    </div>
</body>
  
</html>

chevron_right


Output:
background image

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.