Cara membuat Form di atas gambar dengan CSS + HTML

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Angga Rista October 22, 2020

Untuk masuk ke suatu CMS (Content Management System) di sebuah website, harus melewati halaman login terlebih dahulu.

Tampilan dari halaman login biasanya hanya terdiri dari form dan background warna putih. Karena tidak di kunjungi oleh sembarang orang, tampilan di halaman login di buat sesederhana mungkin. Oleh karena itu, kali ini kita akan membahas bagaimana cara mempercantik halaman login tersebut dengan menambahkan background gambar.

Langkah 1 – Tambahkan HTML

<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="Masukkan Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Masukkan Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>

Langkah 2 – Tambahkan CSS

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* gambar yg di pakai */
  background-image: url("img_nature.jpg");
  min-height: 380px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* lebar field menyesuiakan container */
  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;
}

/* tampilan tombol */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}

Berikut adalah hasilnya

<!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;
}

.bg-img {
  background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  min-height: 380px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

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;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>

<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="Masukkan Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Masukkan Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>


</body>
</html>

CSS Image