背景封面属性未按预期工作

Question

我制作了一个背景图片，宽 1366 像素，高 768 像素，我想将其用作website 主页的背景。

我使用 FullPage 插件将我网站的每个页面分成几个部分。 这是主页，所以我只使用第一部分。

---

到目前为止，我尝试将这个 CSS 代码添加到我主页的#first 部分：

#first{
        width: 500px;
        height: 500px;
        background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

不幸的是，图像只显示了一部分。实际上它比实际短一点。

---

我阅读了 documentation 的 background-size 属性，并在封面属性中显示：

将背景图片缩放到尽可能大，使背景区域完全被背景图片覆盖。 背景图像的某些部分在背景定位区域内可能看不到

那么基本上我怎样才能使我的背景图像适合屏幕尺寸？考虑到移动端，我认为只适合它的宽度会更好。我愿意接受建议和帮助！

Answer 1

请看这里：https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari

祝你好运！