背景圖像拉伸和作物

Question

到目前爲止，我已經設法使背景圖像伸展：

XHTML：

<div id="background"> 
    <img src="images/background.jpg" alt="Background" /> 
</div> 

CSS：

#background 
{ 
    width: 100%; 
    height: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
} 

#background img 
{ 
    width: 100%; 
    height: 100%; 
} 

這種運作良好，除了圖像當圖像的高度超過窗口高度時，從頂部顯示。這意味着圖像的頂部始終顯示，但底部被切斷。我想改變它，以便圖像始終從中心顯示（以便圖像的頂部和底部都被切掉，並顯示圖像的中心）。

Answer 1

Here is a good tutorial on creating a perfect full page background image。同樣的概念也可以應用於任何ol'div。

一般來說，意味着成爲背景圖像的圖像不應出現在標記本身中。你將演示文稿與內容混合在一起

Answer 2

如果具有img標籤不是絕對必要刪除它，在你的#background類中添加以下三行，

background-image:url(images/background.jpg); 
background-position:center; 
background-repeat:no-repeat; 

第一行設置你的DIV的背景。第二行定位它總是居中。第三行確保不會重複這個背景，這是我通過查看HTML結構所假設的。

非常樂意提出進一步的建議。