Add a Login Form to an Image using HTML and CSS

A login form on an image combines a background picture with a login or registration form, making websites visually appealing and engaging.

Commonly used on hotel or event websites to showcase images while providing user access.
HTML structures the form, and CSS styles it to overlay the image attractively.
Enhances user experience compared to a standard form.

It Create a visually appealing login page by layering a centered form over a background image and styling form elements and buttons for better user experience.

Create a container with a background image using a <div> and set its class to "bg-img."
Position the login form using another '<div>' with a class like "container." Adjust its 'left' and 'top' properties.
Customize the appearance of form elements like text inputs and password fields. Use `width: 100%` for full-width inputs.
Enhance the submit button's appearance with CSS. Modify properties like background color, text color, and add hover effects.
Include a title using an '<h1>' element. Style it for visual appeal, such as changing color and adding a text stroke.

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            height: 100%;
            font-family: Arial, sans-serif;
            margin: 0;
        }
        .bg-img {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/CSS.png");
            min-height: 100vh;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .container {
            position: relative;
            max-width: 300px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: green;
            -webkit-text-stroke: 1px black;
            margin-bottom: 20px;
        }

        b {
            color: green;
            font-size: 18px;
            -webkit-text-stroke: 1px black;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            border: 1px solid green;
            box-sizing: border-box;
        }

        .button {
            background-color: green;
            color: white;
            padding: 14px;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        .button:hover {
            background-color: darkgreen;
        }
    </style>
</head>

<body>
    <div class="bg-img">
        <h1>GeeksforGeeks</h1>

        <form class="container">
            <b>Username</b>
            <input type="text" 
                   placeholder="Enter your username" 
                   name="username" required>

            <b>Password</b>
            <input type="password" 
                   placeholder="Enter your password" 
                   name="password" required>

            <button type="submit" class="button">Login</button>
        </form>
    </div>
</body>
</html>

Output:

Add a Login Form to an Image using HTML and CSS

Steps to Design a Login Page with a Background Image

Explore