如何使背景图像固定到媒体 window 而不需要额外的向右滚动，除非实际 window 被扩展？

Question

我对 CSS 和 HTML 非常陌生，所以我基本上只寻找非常简单的解决方案。 我正在制作一个响应式网站，其中背景是波卡的层叠图像。 无论视口的宽度如何，我都希望 polkadots 保持相同的大小并固定到位/相同的图案，我遇到的问题是，无论我尝试什么，图像 - 无论视口宽度如何 - 都会再次重复到相邻的右边总是大约是图像原始视口宽度的 1/5。 导致一个烦人的情况，一个人必须总是向右滚动，因为我想放在页面上的实际内容结果奇怪地只居中到超出实际视口宽度的大约 1/5 额外显示的奇怪大小，所以很明显，当看在它。 然后一切看起来都向右倾斜，我尝试遵循这里给出的许多解决方案来防止背景滚动问题 - 附件、position 等，但没有任何效果！

感谢任何人的帮助！ 再次感谢！！

到目前为止，这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/edibowls-styles.css" rel="stylesheet" type="text/css">
</head>

<body>


<div id="wrapper">

<header>
  

</header>

<div id="main-content">
  

</div>


</div>
    
</body>
</html>



@charset "UTF-8";
/* CSS Document */
@import "compass/css3";


/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

    * {
        margin: 0;
        padding: 0;
        
    }

    ul, li {
  list-style-type: none;

}


#wrapper {margin:0 auto;}

body {background-image: url(../images/edibowls-bg.png); background-color: white;}

header {height: 14vh; background-color: ;}

#main-content {height: 150vh; width: 80%; background-color: ; margin:0 auto;}