F_A_8_Exchange_app/src/style/components/_formLogin.scss

.formdiv{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
	  font-size: 20px;
    margin: 0 auto ;
    // background-color: #c1bdba;
    background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
    
    //height: 500px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
}

h1, .input::-webkit-input-placeholder, .button {
  font-family: 'roboto', sans-serif;
  transition: all 0.3s ease-in-out;
}

h1 {
  height: 100px;
  width: 100%;
  font-size: 18px;
  background: darken($el-color, 4%);
  color: #fff;
  line-height: 150%;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
}

.form {
  box-sizing: border-box;
  width: 260px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  padding-bottom: 40px;
  border-radius: 3px;
  background-color: #fff;
  h1 {
    box-sizing: border-box;
    padding: 20px;
  }
}

.input {
  margin: 40px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px $el-color;
  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $el-color 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: darken($el-color, 20%);
  &:focus {
    box-shadow: none;
    outline: none;
    background-position: 0 0;
    &::-webkit-input-placeholder {
      color: $el-color;
      font-size: 11px;
      transform: translateY(-20px);
      visibility: visible !important;
    }
  }
}

// .input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.9s ease;}

.button {
  border: none;
  background: $el-color;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: 200px;
  color: white;
  margin-left: 25px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
  &:hover { 
    transform: translateY(-3px);
    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
  }
}