How to Add a Login Form to an Image using HTML and CSS

This guide will demonstrate the process of incorporating a form into an image using HTML and CSS.

Numerous websites incorporate a login form overlaying an image. For instance, a dining establishment's website showcasing pictures of the venue, or an event planning company displaying an event image with a login form. In such scenarios, leveraging the image to embed a login or registration form can enhance the visual appeal of the website compared to a conventional form. Using solely HTML and CSS suffices to implement a login form on top of an image. The subsequent example will illustrate the methodology.

Creating the Structure:

In this section, we will construct a basic layout of a website to create a login form displayed on an image.

The purpose of HTML code is to establish the structure of the login form.

HTML Code:

Example


<!DOCTYPE html>
<html>

<head>
	<meta name="viewport"
		content="width=device-width, initial-scale=1">
</head>

<body>
	<div class="background-img">
		<h1>Example Site</h1>

		<form class="container">
			<b>Username</b>
			<input type="text" placeholder="Put 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>

Structure Design:

In the preceding phase, we established the layout of the fundamental website. Our next task involves creating the blueprint for the login form.

CSS Code:

Example


<style>

* {
	box-sizing: border-box;
}
body {
		font-family: Arial, sans-serif;
		height: 100%;
}

h1 {
	text-align:center;
	-webkit-text-stroke: 1px black;
	color:red;
}

.background-img {
	min-height: 400px;
	background-size: cover;
	background-image: url(
"https://miro.medium.com/max/1200/1*xMuIOwjliGUPjkzukeWKfw.jpeg");
}
.container {
	max-width: 300px;
	padding: 17px;
	position: absolute;
	left: 28px;
	top: 50px;
	margin: 20px;
}

b {
	-webkit-text-stroke: 1px black;
	color: red;
	font-size:26px;
}
input[type=text],
input[type=password] {
	margin: 17px 0px;
	border: 2px solid red;
	width: 100%;
	padding: 17px;
}
.button:hover {
	transform: scale(1.2);
	transition: transform 0.2s;
}

.button {
	border: none;
	cursor: pointer;
	width: 100%;
	background-color: #F58840;
	color: #EAF6F6;
	padding: 17px 17px;
}
	</style>

After Merging the HTML and CSS Code

The code provided represents the final version. Upon observation in the visual representation, it becomes evident that the login form aligned to the left is aesthetically superior to the conventional centered login form.

HTML Code:

Example


<!DOCTYPE html>
<html>

<head>
	<meta name="viewport"
		content="width=device-width, initial-scale=1">
	<style>

* {
	box-sizing: border-box;
}
body {
		font-family: Arial, sans-serif;
		height: 100%;
}

h1 {
	text-align:center;
	-webkit-text-stroke: 1px black;
	color:red;
}

.background-img {
	min-height: 400px;
	background-size: cover;
	background-image: url(
"https://miro.medium.com/max/1200/1*xMuIOwjliGUPjkzukeWKfw.jpeg");
}
.container {
	max-width: 300px;
	padding: 17px;
	position: absolute;
	left: 28px;
	top: 50px;
	margin: 20px;
}

b {
	-webkit-text-stroke: 1px black;
	color: red;
	font-size:26px;
}
input[type=text],
input[type=password] {
	margin: 17px 0px;
	border: 2px solid red;
	width: 100%;
	padding: 17px;
}
.button:hover {
	transform: scale(1.2);
	transition: transform 0.2s;
}

.button {
	border: none;
	cursor: pointer;
	width: 100%;
	background-color: #F58840;
	color: #EAF6F6;
	padding: 17px 17px;
}
	</style>
</head>

<body>
	<div class="background-img">
		<h1>Example Site</h1>

		<form class="container">
			<b>Username</b>
			<input type="text" placeholder="Put 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:

Creating the Structure:

After Merging the HTML and CSS Code

Input Required