保持超大背景圖像居中

我正在構建一個由4個div構成的單頁網站，一個在另一個上面，每個網站都有自己的固定背景圖像。圖像比屏幕寬得多，因爲我希望網站能夠在大範圍的屏幕尺寸上保持它的外觀，但是沒有人知道如何真正地將背景圖像居中。因此，在一個小型顯示器中，他們將查看圖像的中心，而在一個更大的顯示器中，他們會看到圖像的相同位置，只是顯示更多。就像這個網站有保持超大背景圖像居中

http://www.cantilever-chippy.co.uk/

當窗口大小的背景圖像相應地移動。

很多謝謝。

來源

2012-12-12 Tim Wilkinson

當你給你的包裝一個靜態寬度，背景圖像的位置也是靜態的，因爲寬度是在每個分辨率相同（960px）。 –

如果您檢查您的鏈接的CSS，你看到的解決辦法：

#images #bg_1 { 
    background-image: url(images/bg/1.jpg); 
    background-position: 50% 0; 
}

而且DIV：

<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>

由JavaScript他們改變＃bg_1寬度上的每個調整。

window.onresize = function(event) { 
    $("#bg_1").css("width", $(window).width()); 
}

來源

2012-12-12 13:31:06 Sam

謝謝你的回覆，但我應該在上面提到過，我已經嘗試了所有定位圖像的css方法，它總是讓它們左對齊，令人沮喪！ –

好吧，我明白了，它們會隨着頁面大小的變化而改變div的寬度。我編輯我的帖子。 – Sam

您正在尋找background-position的CSS屬性。

http://www.w3schools.com/cssref/pr_background-position.asp

它可以在一個絕對像素偏移（所以如果你知道你的圖像的大小以及您希望它出現，你可以精確計算的div的大小）。或者，你可以通過一個百分比。它也可以帶一個負數，所以你可以在任何方向將它從屏幕上偏移。

不過，對於您的情況，您可能需要簡單的「中心」值。像這樣的東西應該工作：

/* This should center the background image in the div. */ 
div.background_image_block { 
    background-position: center center; 
}

來源

2012-12-12 13:31:40 GSP

這應該工作

#bg{ 
    background-image:url(yourURL); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center; 
}

背景固定屬性是Firefox和Opera。

來源

2012-12-12 13:33:54 hobberwickey

保持超大背景圖像居中

回答

相關問題