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


We can easily add a form on a web page. With that, a form can also be added to an image with CSS. In this tutorial, a form will be added to a full-width image with CSS. Let us see how.

Set the Styles for the web Page

To begin, set the height, margin and padding of your web page. We have also set the font family using the font-family property −

body, html {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Set the Styles for all the Elements

We have used the box-sizing property to include the padding and border in an element's total width and height. The border-box lets the width and height properties include the content, padding and border −

* {
   box-sizing: border-box;
}

Set the Container for the Image and Form

We have a div and a form in it. The form includes elements for email, password, and address. The label and placeholder for each for field is also set. A button is also included using the <button> element −

<div class="backgroundImage">
   <form class="formContainer">
      <h1>Register Here</h1>
      <label for="eMail">Email</label>
      <input type="text" placeholder="Enter your Email ID" name="eMail" required>
      <label for="pass">Password</label>
      <input type="password" placeholder="Enter your Password" name="pass" required>
      <label for="Address">Address</label>
      <input type="text" placeholder="Enter your Address" name="Address" required>
      <button class="btn-login">Login</button>
   </form>
</div>

Set the Full-width Background Image

The div class backgroundImage sets a full-width background image. The height is set to 100% using the height property. The background image is set with the background-image property. The background-size is used to set the size of the background image. The cover value suggests resizing the background image to cover the entire container −

.backgroundImage {
   height: 100%;
   background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

Set the Form to the Image

The form is set to have absolute position to adjust with the image. The right property is also set to keep the form on the left. It affects the horizontal position of a positioned element. The form width is set with the max-width property. It sets the maximum width of the form −

.formContainer {
   position: absolute;
   right: 40%;
   max-width: 400px;
   margin: 20px;
   padding: 16px;
   background-color: white;
}

Example

The following is the code to add a form to a full-width image with CSS −

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      body, html {
         height: 100%;
         margin: 0;
         padding: 0;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      * {
         box-sizing: border-box;
      }
      .backgroundImage {
         height: 100%;
         background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
      }
      .formContainer {
         position: absolute;
         right: 40%;
         max-width: 400px;
         margin: 20px;
         padding: 16px;
         background-color: white;
      }
      label{
         font-size: 20px;
         font-weight: bolder;
      }
      input[type=text], input[type=password] {
         width: 100%;
         font-size: 18px;
         padding: 15px;
         margin: 5px 0 22px 0;
         border: none;
         background: #e3ff95;
      }
      input[type=text]:focus, input[type=password]:focus {
         background-color: #ddd;
         outline: none;
      }
      .btn-login {
         background-color: #4CAF50;
         color: white;
         padding: 16px 20px;
         border: none;
         cursor: pointer;
         width: 100%;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <div class="backgroundImage">
      <form class="formContainer">
         <h1>Register Here</h1>
         <label for="eMail">Email</label>
         <input type="text" placeholder="Enter your Email ID" name="eMail" required>
         <label for="pass">Password</label>
         <input type="password" placeholder="Enter your Password" name="pass" required>
         <label for="Address">Address</label>
         <input type="text" placeholder="Enter your Address" name="Address" required>
         <button class="btn-login">Login</button>
      </form>
   </div>
</body>
</html>

Updated on: 15-Nov-2023

307 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements