Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a Login Form to an Image using HTML and CSS?
The login form on an image can be found on many websites. An organization that organizes a special event might have a website with a picture of the event and a login form, or a restaurant might have a website with pictures of the restaurant.
In such case we use image to make a login or signup. Compared to a standard login or registration form, this layout makes the website more appealing. In order to create a login form on a picture, we only need HTML and CSS. Before we dive into the article let’s have a quick view on the HTML <img> tag and login form.
Approach to Create a Login Form on an Image
In this approach we will create a form and place that form on an image. Then we will decorate the form and adjust the alighment as per our requirements. To create a form to an image please follow the below steps in the follwing order.
- Step 1: As we said we will create a HTML form, and place that form on an image.
- Step 2: After creating the form we will desing our form by using internal CSS.
Creating Structure HTML Form
To create a form on an image we need will need a container with a background image. To know how to create a HTML form you can check our HTML Forms article.
<!DOCTYPE html>
<html>
<body>
<div class="backgroundimage">
<form>
<div class="profilePic">
<img src=
"https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
alt="Avatar"
class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text"
placeholder="Enter Username"
name="uname"
required />
<label for="pass"><b>Password</b></label>
<input type="password"
placeholder="Enter Password"
name="pass"
required />
<button type="submit">Login</button>
<label>
<input type="checkbox"
checked="checked"
name="remember" /> Remember me
</label>
</div>
<div class="formFields" >
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href>Password?</a></span>
</div>
</form>
</div>
</body>
</html>
Styling HTML Form
Here we have syle the form elements and attached the image as well.
- To attached the image on the parent dinf we hace used CSS background-image porpety, and to set the image properly we have used background-cover property
- We have used other CSS Properties to style the form elements as per our need, you can create your own desing as well, but try to make the form responsive allways.
<style>
.backgroundimage {
background-image: url(
"https://www.tutorialspoint.com/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
float: right;
padding-top: 16px;
text-decoration: none;
}
</style>
Complete Example Code
In the following example we have combined the above step's pseudo code into a complete to code to create a form on an image.
<!DOCTYPE html>
<html>
<head>
<style>
.backgroundimage {
background-image: url(
"https://www.tutorialspoint.com/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
padding-top: 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="backgroundimage">
<form>
<div class="profilePic">
<img src=
"https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
alt="Avatar"
class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text"
placeholder="Enter Username"
name="uname"
required />
<label for="pass"><b>Password</b></label>
<input type="password"
placeholder="Enter Password"
name="pass"
required />
<button type="submit">Login</button>
<label>
<input type="checkbox"
checked="checked"
name="remember" /> Remember me
</label>
</div>
<div class="formFields" >
<button type="button" class="cancelbtn">Cancel</button>
<p>
<span class="pass">Forgot <a href>Password?</a></span>
</p>
</div>
</form>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the login form along with an image that acts as the background for the login form displayed on the webpage.
676 Views
