背景圖像溢出不起作用

Question

我有點麻煩讓這個圖像顯示正確。

我有我的網站設置與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; 
} 

這工作（有點），但我留下了兩個問題。

1. 它不會在Safari工作（鉻/火狐是罰款）
2. 它留下一個滾動選項僅在右側。 （例如，我可以進一步向右滾動以查看溢出的圖像）。

對於2，我只希望用戶根據其屏幕分辨率查看圖像的數量。

PS。我知道3109px是巨大的網絡和屏幕資源，但我正在修復之前，我繼續圖像，使其更小;但是，當我這樣做時，我仍然會遇到這個問題。

Answer 1

什麼控制如果內部div是可見的或不在電影包裝外是父親的溢出，您沒有設置。所以，你應該做

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

Answer 2

我也遇到過這種問題，所以這裏是我的方法。

爲HTML：

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

的CSS：

#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%; 
} 

希望這有助於。 :)