Html 背景图像溢出不工作

我在正确显示此图像时遇到了一些问题

我有一个宽度为940px的站点设置，我想保持这个宽度，但其中有一个更宽的div并溢出，这样你仍然可以在更大的显示器上看到

<div id="cinema-wrapper">
<div id="cinema-displays"></div>
</div>


#cinema-wrapper {
width:940px; 
height:764px;
}
#cinema-displays {
background-image: url(../mackbyte_files/img/cinema-bg.png);
height: 764px;
width: 3109px;
background-repeat: no-repeat;
position: absolute;
left:50%;
margin-left:-1554.5px;
overflow:visible !important;
}

#电影包装{
宽度：940px；
高度：764px；
}
#电影放映{
背景图像：url（../mackbyte_files/img/cinema bg.png）；
高度：764px；
宽度：3109px；
背景重复：无重复；
位置：绝对位置；
左：50%；
左边距：-1554.5px；
溢出：可见！重要；
}

这是可行的，但我还有两个问题

它在safari中不起作用（chrome/firefox也可以）

它只在右边留下一个滚动选项。（例如，我可以进一步向右滚动以查看溢出的图像）

对于2，我只希望用户根据屏幕分辨率看到图像的数量

---

另外，我知道3109px对于网络和屏幕分辨率来说是巨大的，但在我继续使用图像缩小它之前，我正在进行修复；但是，当我这样做的时候，我仍然会有这个问题。

控制内部div是否在电影院包装外可见的是您没有设置的父级溢出。所以，你应该这样做

#cinema-wrapper {
    width:940px; 
    height:764px;
    overflow:visible;
}

---

我也经历过这样的问题，所以这里是我的方法

对于HTML：

<div id="cinema-wrapper">
    <div id="cinema-subwrapper">
        <div id="cinema-displays"></div>
    </div>
</div>

---

希望这有帮助。：）

请给我们一个活生生的例子。为什么你要把一个3109px宽的方块放进一个940px宽的洞里？

#cinema-wrapper {
    width: 940px; 
    height: 764px;
    overflow: visible;
    position: relative;
}

#cinema-subwrapper {
    display: inline-block;
    position: relative;
    right: -50%;
}

#cinema-displays {
    background: url(../mackbyte_files/img/cinema-bg.png) center top no-repeat;
    height: 764px;
    width: 3109px;
    position: absolute;
    left: -50%;
}