背景图像溢出不起作用

2013-02-02 118 views 0 likes

我有点麻烦让这个图像显示正确。背景图像溢出不起作用

我有我的网站设置与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; 
}

这工作（有点），但我留下了两个问题。

它不会在Safari工作（铬/火狐是罚款）
它留下一个滚动选项仅在右侧。（例如，我可以进一步向右滚动以查看溢出的图像）。

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

PS。我知道3109px是巨大的网络和屏幕资源，但我正在修复之前，我继续图像，使其更小;但是，当我这样做时，我仍然会遇到这个问题。

来源

2013-02-02 Trent

请给我们一个生动的例子。 –

你为什么要把宽度为3109px的块放入940px宽的孔中？ – leftclickben

回答

什么控制如果内部div是可见的或不在电影包装外是父亲的溢出，您没有设置。所以，你应该做

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

来源

2013-02-02 19:31:21 vals

我也遇到过这种问题，所以这里是我的方法。

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

希望这有助于。 :)

来源

2013-06-22 00:04:59

背景图像溢出不起作用

回答

相关问题