Login Form with Image background
How to » Login Form with Image background?
Study in this chapter:
1. - How to add / put an image to a form?
2. - insert background image to login / register form
In this chapter we develop methods used to insert background image to login / register form. For a better combination, the image should be dark and the text light, or the other way
We add CSS style to center an image as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Example:
The entire HTML and CSS code
To Create a background image to login / register form - CSS and HTML entire code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}* {
box-sizing: border-box;
}
.responsive {
width: 80%;
margin-top: 4px;
margin-right: auto;
margin-bottom: 4px;
margin-left: auto;
height: auto;
}
.bg-img {
/* The image used */
background-image: url("https://www.agernic.com/uploads/mountains.jpg");
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}/* Add styles to the form container */
.container {
position: absolute;
right: 0;
margin: 20px;
max-width: 300px;
padding: 16px;
background-color: white;
}/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}/* Set a style for the submit button */
.btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="responsive">
<h2>Form on Image</h2>
<div class="bg-img">
<form style="width:400px; height:330px; color: #FF0; background:url(https://www.agernic.com/uploads/nice-france.jpg);" action="/action_page.php" class="container">
<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><p>This example creates a form on a responsive image.
Try to resize the browser window to see how it always will cover
the whole width of the screen, and that it scales nicely on all screen sizes.</p>
</div>
</body>
</html>
Related subjects:
Create a Sticky Sidebar
Sticky image / element / div on scroll
Position Text Over an Image HTML CSS responsive
Registration form with picture / photo - example
Registration form with picture / photo CSS, HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
height: 100%;
}
h1 {
text-align:center;
-webkit-text-stroke: 1px black;
color:#00F;
}
.background-img {
min-height: 400px;
background-size: cover;
background-image: url(
"https://www.agernic.com/uploads/nice-france.jpg");
}
.container {
max-width: 300px;
padding: 17px;
position: absolute;
left: 28px;
top: 50px;
margin: 20px;
}
b {
-webkit-text-stroke: 1px black;
color: #00F;
font-size:24px;
}
input[type=text],
input[type=password] {
margin: 17px 0px;
border: 3px solid #090;
width: 100%;
padding: 17px;
}
.button:hover {
transform: scale(1.1);
transition: transform 0.2s;
}
.button {
border: none;
cursor: pointer;
width: 100%;
background-color: #069;
color: #EAF6F6;
padding: 17px 17px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="background-img">
<h1>Agernic.com Form</h1>
<form class="container">
<b>Username</b>
<input type="text" placeholder="Put your Username"
name="username" required>
<b>Password</b>
<input type="password" placeholder="Enter your Password"
name="password" required>
<button type="submit" class="button">Login</button>
</form>
</div>
</body>
</html>
Tags:
Simple registration form with photo / image
image and form side by side html, registration form with photo upload in html, insert image in html from, form background image
How do I add / put an image to a form? How do you put a background image on a form in HTML?
Summary of description
registration with photo upload in html, insert in html from, background
Login Form with Image background - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.