Html 水平收缩浏览器窗口时不会水平移动的身体背景图像

我想定位一个圆形背景图像/圆形图像，使其按照以下JSFIDLE显示：

但是，我不想使用

<div id="outer-container">

目前正在使用的

然后，当浏览器水平收缩时，刚好小于div的宽度

<div id="container">

然后应该引入滚动条，一直向右滚动意味着当前只能看到该图像的一半

仅当浏览器窗口再次水平展开时，才能看到容器外部的另一半

理想情况下，我只想在主体上添加一个背景图像，但我不确定是否可以这样做，并给它一个相对于容器的位置，以便无论浏览器窗口有多宽，它都保持在完全相同的位置

我还考虑过在标题中添加一个绝对定位的div，如下所示：

但是，问题是，随着浏览器窗口水平收缩，并引入水平滚动条，如果向右滚动，新添加的div会增加页面的可滚动宽度

我希望滚动停止在容器的边缘，以便只显示一半的圆

在此方面的任何帮助都将不胜感激

---

提前感谢您的时间和帮助。

使用JavaScript可能的解决方案：

$window.scroll函数{ $'image'.css'left'，$this.scrollLeft+'px'； }; 形象{ 背景图片：url'http://www.w3schools.com/images/compatible_firefox.gif'; 位置：绝对位置； 宽度：60px； 高度：60px； z指数：-1； 背景附件：滚动条； 背景位置：20px 20px； 背景重复：无重复； } 容器{ 宽度：1000px； 高度：1000px； 背景：透明 } Lorem ipsum dolor sit amet，奉献精英， 劳工和大型企业的临时投资 阿利夸。我们需要一个最低限度的练习 ullamco laboris nisi和aliquip ex ea commodo consequat。 在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。例外 圣奥凯卡铜塔无过失，必须承担责任 这是我的工作场所。

---

据我所知，你想要这样的东西看看他们的例子谢谢你的评论。不幸的是，这意味着垂直向下滚动页面时背景也保持不变。我不希望这种情况发生。我关心的是水平滚动。