Introduction
In today’s digital age, a well-designed login page in HTML with CSS code with background image is essential for any application or website. It not only ensures security but also provides a pleasing aesthetic for users. This tutorial will guide you through creating a simple yet stylish login page in HTML with CSS code with background image, complete with a background image. Let’s dive into the step-by-step process.
Discover how to create a stylish. Enhance your skills by building a login page in to create visually appealing interfaces.
HTML Code Structure
The first step in creating your login page is to set up the HTML structure. Below is a basic HTML template for the login form. You will want to copy this into your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="background">
<div class="form-container">
<h2>Login</h2>
<form>
<!-- Username Field -->
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username">
<span class="icon">👤</span>
</div>
<!-- Password Field -->
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password">
<span class="icon">🔒</span>
</div>
<!-- Options -->
<div class="options">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot password?</a>
</div>
<!-- Submit Button -->
<button type="submit" class="btn">Login</button>
<!-- Register Link -->
<p class="register-link">Don’t have an account? <a href="#">Register</a></p>
</form>
</div>
</div>
</body>
</html>
A well-designed footer not only improves website navigation but also enhances user experience by offering key information like contact details, privacy policy, and social media links. For best practices, check out resources from Smashing Magazine or W3Schools.
CSS Styling with Background Image
Now that we have the HTML structure ready, we can focus on the CSS to style our login page. The following CSS code will help you to achieve a great look with a background image:
/* General Styles */
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.background{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: url('assets/mountain.avif') no-repeat center center/cover; /* Replace 'background.jpg' with the background image */
}
/* Background Overlay */
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Dark overlay */
z-index: -1;
}
/* Glassmorphic Form Container */
.form-container {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(15px);
padding: 30px;
width: 350px;
text-align: center;
color: #fff;
}
@media screen and (max-width: 600px) {
.form-container {
width: auto;}
}
/* Form Heading */
.form-container h2 {
font-size: 24px;
margin-bottom: 20px;
color: #fff;
}
/* Input Groups */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group label {
display: block;
text-align: left;
margin-bottom: 5px;
font-size: 14px;
color: #fff;
}
.input-group input {
width: 90%;
padding: 10px 40px 10px 10px;
border: none;
border-radius: 8px;
font-size: 16px;
color: #000;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
outline: none;
}
.input-group .icon {
position: absolute;
top: 40px;
right: 10px;
transform: translateY(-50%);
font-size: 16px;
color: #555;
}
/* Options */
.options {
display: flex;
justify-content: space-between;
font-size: 14px;
margin-bottom: 10px;
}
.options a {
color: #ff6a00;
text-decoration: none;
}
/* Submit Button */
.btn {
width: 50%;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
color: #000;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background: #ff6a00;
color: #fff;
}
/* Register Link */
.register-link {
margin-top: 15px;
font-size: 14px;
}
.register-link a {
color: #ff6a00;
text-decoration: none;
}Attachment
Your download will begin shortly…
30 seconds remaining
Conclusion
Your login page is now complete! We’ve covered both the HTML structure and the CSS styling, including the addition of a background image. With this simple yet effective design, you now have a visually appealing login page that enhances the user experience. You can further customize the styles to align with your brand’s identity, ensuring a cohesive look and feel across your website. Take advantage of these foundations to create a user-friendly and professional login interface tailored to your needs.