上浆背景图片

Question

section {
  background-image: url("../img/singupbg.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  `enter code here`
}

<div>
  <section>
    <div class="signup-area">
      <h1>Hesap Oluştur</h1>
      <button class="google">
            <img src="../img/google.png" alt="" /> Google ile kayıt ol
          </button>
      <div class="or">
        <hr width="50px" /> ya da
        <hr width="50px" />
      </div>
      <form action="#">
        <div class="input-area">
          <span> E-posta adresi</span> <input type="text" />
        </div>

        <div class="input-area">
          <span>Şifre Oluştur</span> <input type="password" />
        </div>
        <div class="input-area">
          <span>Şifreyi Tekrarla</span> <input type="password" />
        </div>
        <button class="signup">Kaydol</button>
      </form>

      <span class="login">Zaten Hesabınız var m? <a href="">Giriş Yapın</a></span>
    </div>
  </section>
</div>

原图这是网站

我想将原始图像作为背景，但是当我应用这些代码时，它不适合背景并且从底部被裁剪。当我调整高度时，宽度变得太小了。我该怎么办？

Answer 1

你试过这个吗？

  background-size: 100%;