Signup/Sign In
PUBLISHED ON: AUGUST 24, 2021

How to add a form to a full-width image with CSS?

The forms are widely used over the webpage and used for login, registration, or other purposes. To create a form for a full-width image, we need to add some CSS properties.

Let's get started.

A form on image

To add a form over the full-width image, first, take a <div> element and add the image and a form within it.

The image can be added with <img> tag. Set width of the image to 100% so that it covers the whole width of the container.

Add position: relative and position: absolute to the form so that the form is placed over the image. We position the form using CSS left, right, top or bottom property.

Example: Adding form on image

In this example, we have placed the form on the bottom right of the image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
   .container {
      position: relative;
   }
   img {
      width: 100%;
   }
   .form-content {
      position: absolute;
	  bottom: 10%;
	  right: 5%;
	  background-color: #cccccc;
	  height: 400px;
   }
   input[type=text], input[type=password] {
	  width: 90%;
	  padding: 15px;
	  margin: 5px 0 22px 0;
	  border: none;
	  background: #f1f1f1;
	}
	h1 {
	   text-align: center;
	}
	.btn {
	   background-color: blue;
	   color: white;
	   padding: 16px;
	   margin: 5px;
	}
	label {
	   color: blue;
	   font-size: 16px;
	}
	.btn:hover {
	   background-color: black;
	}
</style>
</head>
<body>    
    <div class="container">
	  <img src="https://s3.studytonight.com/tutorials/uploads/pictures/1629713661-101156.png">
	  <div class="form-content">
	    <form>
		   <h1>Login</h1>
			<label for="email"><b>Email</b></label>
			<input type="text" placeholder="Enter Email" name="email" required>

			<label for="psw"><b>Password</b></label>
			<input type="password" placeholder="Enter Password" name="psw" required>

			<button type="submit" class="btn">Login</button>
		</form>
      </div>
	</div>
</body>
</html>

Output

Here is the output of the above example.

form on image

Example: Adding a form to an image

We can also use background-image to add the image and add the form on the background image.

Conclusion

In this tutorial, we have learned to add a form to an image. To do so, either add image and place form with CSS position property or use background-image and add a form on the foreground.



About the author: