Форма на фоне изображения

 alexei 26/10/2021 - 09:44

Здесь вы узнаете, как сделать форму на фоне изображения, растянутого на всю ширину экрана, при помощи CSS.


Форма на фоне изображения


Как сделать форму на фоне изображения

Шаг 1) Добавляем HTML:


<div class="bg-img">
  <form action="//msiter.ru/action_page.php" class="container">
    <h1>Авторизация</h1>

    <label for="email"><b>Электронная почта</b></label>
    <input type="text" placeholder="Введите электронную почту" name="email" required>

    <label for="psw"><b>Пароль</b></label>
    <input type="password" placeholder="Введите пароль" name="psw" required>

    <button type="submit" class="btn">Войти</button>
  </form>
</div>

Шаг 2) Добавляем CSS:


body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* Используемое изображение */
  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;
}

/* Поля ввода в полную ширину */
  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: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}