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 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.
Preview of Login Form to an Image
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
<!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(
"https://media.w3wiki.net/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>w3wiki</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
Contact Us