內容的背景圖像位置

Question

布局情況

我以為這是一個普遍的問題，但是我在任何地方都找不到。

以瀏覽器窗口為中心的固定寬度的布局。 在它的后面，背景也居中。

背景不應導致水平滾動條。 內容框應。

我無法將背景設置為body元素，因為那將意味着背景相對於瀏覽器保持居中（因此，當瀏覽器窗口太小而無法容納整個內容框時，則相對於內容“移動”）。

如果我不將其設置為主體，則任何能夠“包含”整個圖像的東西也會引起滾動條……不是嗎？

JavaScript真的是我唯一的希望嗎？

編輯：

似乎我對自己的解釋不夠充分。

這就是我想要的 ：

（突出顯示的區域代表瀏覽器窗口）

1- 沒有滾動條，背景不固定

請注意，沒有滾動條。

2- 內容滾動條，背景固定在內容上

瀏覽器上有一個用於內容的滾動條

這就是我得到的

1- 窗口背景中心

如果設置為body，則背景以窗口為中心，因此與內容不對齊。

2- 背景導致滾動條

如果將背景設置為元素，則會在窗口上引起滾動條，因此，在調整瀏覽器大小時，內容不會保持居中狀態。

回答

就像下面接受的代碼一樣，但是帶有以下代碼

#myBackground {
    background: url("img/background.png") no-repeat scroll center 0 transparent;
    height: 6000px; /*height of the background*/
    min-width: 950px; /*width of the content box*/
    position: absolute;
    width: 100%;
    z-index: -1;
}

Answer 1

我將使用DIV，它是具有位置：固定的身體的直接子代

#myBackground
{
  background-image: url(myBackground.jpg);
  position:fixed;  
  width:100%;
  height:100%;
}

<div id="myBackground"></div>

在舊版本的IE中缺少position：fixed支持，而在新版本中，您需要強制IE使用更現代的doctype來正確處理position：fixed。 嘗試將其作為HTML的第一行：

<!doctype html>

一個問題，您需要“固定”背景還是我假設的背景？ 如果您希望背景與其余內容一起滾動，請使用position：absolute替換position：fixed，並根據需要放棄HTML5文檔類型。

內容的背景圖像位置

問題描述

1 個解決方案

解決方案1
1 已采納 2011-11-20 14:34:54

內容的背景圖像位置

問題描述

1 個解決方案

解決方案1 1 已采納 2011-11-20 14:34:54

解決方案1
1 已采納 2011-11-20 14:34:54