CSS 设置网页的背景图片

背景

最近正好在写一个个人博客网站“小石潭记”，需要一张有水，有鱼的图片。正好玩原神遇到了类似场景，于是截图保存，添加到网站里面。以下是效果图：

css

写个class，加到整个网页的body上

.bodyBg {
    background-color: aliceblue; 
    width: 100vw;
    height: 100vh;
    background-image: url('/bg-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

说明

background-color：设置一个颜色，由于图片加载慢很多，在图片展示之前先显示一个颜色；
background-size：设置图片裁剪的模式；
background-repeat: 由于我希望整张图片铺满，所以设置no-repeat;
background-attachment: 设置图片fixed固定住，不然y轴可以滚动时，多余的内容会不显示图片；

问题

不知道为什么添加图片后会有宽度溢出，导致x轴出现滚动条，
如果不加图片就没问题（不知道有没有大佬知道原因，恳请告知！）。
所以加上另外一个属性,x轴有溢出就隐藏。

    overflow-x: hidden;