调整我的背景图像的大小，使其成为整页背景图像

Question

我正在尝试使用 unsplash 中的此图像创建一个具有完整页面背景的登陆页面。我使用 MS Paint 将图像大小调整为 1200px，但当我尝试将其设置为背景图像时，它仍然显示为放大的。

HTML

<div class="background-image">
  <div class="text-overlay">
    <h1><span> Nom</span> <span>Nom</span> <span>Nosh</span></h1>
    <h3>Share your thoughts and recipes for short meals and snacks here!</h3>
    <p>Introducing Nom Nom Nosh, your ultimate hub for quick and delectable
       meal ideas! Catering to the fast-paced rhythm of modern life, Nom Nom
       Nosh is a blogging haven where users can seamlessly share their thoughts
       and swap recipes for short, satisfying meals and snacks. Whether you're
       a culinary enthusiast seeking to spice up your snack game or someone in
       search of speedy, flavorful solutions for your daily dining, Nom Nom
       Nosh is here to transform your kitchen into a hub of creativity and
       efficiency!
    </p>
  </div>
</div>

CSS

.background-image {
  background-image    : url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
  background-size     : cover;
  height              : 100vh;
  background-position : center;
}

Answer 1

你可以将CSS代码更改为这样应该可以工作

.background-image {
    background-image: url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
    background-size: contain;
    height: 100vh;
    width: 100vw;
    background-repeat: no-repeat;
    background-position : center;
}