背景覆盖属性不能按预期工作

Question

我制作了一个背景图片,1366px宽和768px高，我想用作我的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，以及罩属性，它说：

规模的背景图像要尽可能大，这样的背景区域完全被背景图像覆盖。 背景图像的某些部分可能没有考虑到背景设定区域

内所以基本上我怎样才能使我的背景图片适应屏幕大小？考虑到移动端，我认为只适合宽度会更好。我愿意提供建议和帮助！

Answer 1

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

祝你好运！