How TO - Bild auf Bild formen
Erfahren Sie, wie Sie mit CSS ein Formular zu einem Bild in voller Breite hinzufügen.
Form auf Bild
So fügen Sie einem Bild ein Formular hinzu
Schritt 1) HTML hinzufügen:
Beispiel
<div class="bg-img">
<form 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>
Schritt 2) CSS hinzufügen:
Beispiel
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-img {
/* The image used */
background-image: url("img_nature.jpg");
/* Control the height of the image */
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;
}