背景图像拉伸和作物

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结构所假设的。

非常乐意提出进一步的建议。