Signup/Sign In

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">
<meta charset="utf-8">
<link rel="stylesheet" href="">
   .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;
    <div class="container">
	  <img src="">
	  <div class="form-content">
			<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>


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.


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: