Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
.container {
background-image: url("image.jpg");
background-size: cover;
position: relative;
}
.form {
position: absolute;
/* positioning values */
}
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 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 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 right side. It affects the horizontal position of a positioned element. The form width is set with the max-width property −
.formContainer {
position: absolute;
right: 40%;
max-width: 400px;
margin: 20px;
padding: 16px;
background-color: white;
}
Example
The following is the complete 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;
border-radius: 8px;
}
label {
font-size: 20px;
font-weight: bolder;
display: block;
margin-bottom: 5px;
}
input[type=text], input[type=password] {
width: 100%;
font-size: 18px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #e3ff95;
border-radius: 4px;
}
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;
border-radius: 4px;
}
.btn-login:hover {
background-color: #45a049;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 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 type="submit" class="btn-login">Register</button>
</form>
</div>
</body>
</html>
A full-width background image appears with a white registration form positioned on the right side. The form contains input fields for email, password, and address with a green submit button. The form has rounded corners and proper spacing.
Conclusion
Adding a form to a full-width image is achieved using CSS positioning properties. The background image uses background-size: cover for full coverage, while the form uses position: absolute for precise placement over the image.
423 Views
