Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

HTML CSS Web Development Front End Technology

A login form on an image creates an attractive, modern website design commonly used by restaurants, event organizers, and businesses. This approach overlays a functional login form on a background image, making the website more visually appealing than standard forms.

Syntax

.container {
    background-image: url('image-path');
    background-size: cover;
    position: relative;
}

form {
    position: absolute;
    /* positioning and styling properties */
}

Approach

To create a login form on an image, follow these steps

  • Step 1: Create an HTML form with input fields for username and password
  • Step 2: Set a background image on the container using CSS
  • Step 3: Style the form elements and position them appropriately

Example: Login Form on Background Image

The following example creates a complete login form overlaid on a background image 

<!DOCTYPE html>
<html>
<head>
<style>
    .backgroundimage {
        background-image: url('/css/images/css-mini-logo.jpg');
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    form {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        width: 350px;
    }
    
    .profilePic {
        text-align: center;
        margin-bottom: 20px;
    }
    
    img.avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid #4caf50;
    }
    
    input[type="text"],
    input[type="password"] {
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 14px;
    }
    
    label {
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 5px;
    }
    
    button {
        width: 100%;
        background-color: #4caf50;
        color: white;
        padding: 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        margin: 10px 0;
    }
    
    button:hover {
        background-color: #45a049;
    }
    
    .cancelbtn {
        background-color: #f44336;
    }
    
    .cancelbtn:hover {
        background-color: #da190b;
    }
    
    .form-footer {
        text-align: center;
        margin-top: 15px;
    }
    
    .form-footer a {
        color: #4caf50;
        text-decoration: none;
    }
</style>
</head>
<body>
    <div class="backgroundimage">
        <form>
            <div class="profilePic">
                <img src="/css/images/user-avatar.png" alt="Avatar" class="avatar" />
            </div>
            
            <label for="uname">Username</label>
            <input type="text" placeholder="Enter Username" name="uname" required />
            
            <label for="pass">Password</label>
            <input type="password" placeholder="Enter Password" name="pass" required />
            
            <button type="submit">Login</button>
            <button type="button" class="cancelbtn">Cancel</button>
            
            <div class="form-footer">
                <label>
                    <input type="checkbox" name="remember"> Remember me
                </label>
                <p><a href="#">Forgot Password?</a></p>
            </div>
        </form>
    </div>
</body>
</html>

A centered login form with a circular avatar image appears over a background image. The form has a semi-transparent white background with rounded corners and includes username/password fields, login/cancel buttons, remember me checkbox, and forgot password link.

Key Styling Properties

Property Purpose
background-size: cover Ensures the image covers the entire container
rgba(255, 255, 255, 0.9) Creates semi-transparent form background
box-shadow Adds depth and separation from background
border-radius Creates rounded corners for modern appearance

Conclusion

Creating a login form on an image combines HTML form structure with CSS background styling. Use semi-transparent overlays and proper positioning to ensure both visual appeal and form functionality remain intact.

Updated on: 2026-03-15T18:10:09+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements