The login form on an Image is used on many websites. Like hotel websites that contain pictures of the hotels or some organizations that organize special events holding that event picture and login form. 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 to the concept.
Preview:
Approach:
- 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.
Example: The implementation of login form on an image
html
<!DOCTYPE html><html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
body {
height: 100%;
font-family: Arial, sans-serif;
margin: 0;
}
.bg-img {
background-image: url("img.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: