2010-10-29 90 views
0

我有一個大的div住房我的背景圖片。一般來說,它將以雙方離開屏幕爲中心。因爲它是背景,我不希望滾動條出現在瀏覽器上 - 這裏有解決方案嗎?可以一個大的div不觸發瀏覽器滾動條?

感謝

編輯:讓我根據答案澄清:

我有超出瀏覽器的邊界的大圖像,但是,我需要分配給一個div背景或IMG代替因爲我正在操縱它w jquery等

+0

那麼,自動高度呢?你能舉個例子嗎? – Ency 2010-10-29 22:43:23

+3

這可能是值得解釋爲什麼你不能使用通常的解決方案(只是在CSS中使用背景圖像)(我假設有一個很好的理由:) – psmears 2010-10-29 22:43:48

+0

是否有一個原因,你不能只是將圖像設置爲背景通過CSS而不是黑客一個div(background-image:url('filename.ext');)? – 2010-10-29 22:45:21

回答

0

基於附加信息,我想出了這個例子。圖像是填充整個可見區域的div的背景,並且非常像它的身體背景圖像一樣(在Firefox中測試過)。您甚至可以通過修改background-position屬性來滾動圖像。

<html> 
<head> 
<style> 
#test { 
    position: fixed; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg'); 
    background-position: 50% 50%; 
    overflow: none; 
    z-index: -1; 
} 
</style> 
</head> 
<body> 
<div id="test"> 
</div> 

Here's some other stuff in the body of the page. 

<div> 
and some stuff in a div in the body of the page. 
</div> 

</body> 
</html> 
1

我剛剛遇到了和你一樣的情況。

經過一些實驗後,我發現它是由CSS屬性'位置'的錯誤值引起的。

當我將div的位置設置從'fixed'更改爲'absolute'時,事情就像您想要的一樣。

1

這對我有效;我記得知道它在Opera中不起作用,但那是很久以前的事了。

html, body { overflow-x: hidden; }