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 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>
285 Views
