Question

我正在使用CSS3包含的值。这似乎是我想要的，它将调整窗口大小调整后的背景图像。但是，背景查看/定位区域仅允许图像调整大小。封面工作除了当窗口调整到非常大的位置时，并非所有图像都可见。见这里：CSS

body {
     background:url('images/bg.jpg') no-repeat fixed;
     background-size: contain;
}

我希望背景图片至少占据包含内容的所有区域（标题，内容，页脚区域）。这似乎是需要解决的问题：“图像被渲染，保留其内在比例，包含在背景定位区域内或覆盖背景定位区域的最大尺寸”。 CSS 如何更改背景定位区域？

Answer 1

并非所有图像都可见，因为很明显，图像的尺寸几乎是方形的，但是当您将浏览器调整为全屏时，通常屏幕比它高很宽。

我认为这是蒲公英，你不希望在那个特定的形象中被切断。一个简单的解决方法是将它固定在屏幕底部，并将顶部切掉。

body {
   background:url('images/bg.jpg') no-repeat center bottom fixed;
   background-size: cover;
}

关于整页背景图像技术的更多讨论，包括使其在MSIE中工作的代码，on css-tricks.com

Answer 2

您可以使用img元素将图像放在文本后面的路径中，在我的jsfiddle中，代码的第一部分是文本后面的图像，不使用背景代码。

第二个是使用CSS。它需要一些额外的css编码，但这只是你可以做的事情的可能性。同样，这可能不是你的答案，而是想到你能做什么。

http://jsfiddle.net/mmsD5/

#l1 {
overflow: hidden;

}

#l1 p{
width: auto;
max-height: auto;
height: auto;
overflow: hidden;
z-index: 2;
position: relative;
color: #fff;

}

#l1 img {
position: absolute;
width: 100%;
height: auto;
z-index: 1;

}

#l2 {
position: absolute;
top: 40em;
background: url(http://stylegerms.com/wp-content/uploads/2013/06/Techno-Desktop-backgrounds-Desktop-Wallpaper.jpg) no-repeat;

}

改变背景定位区域

2 个答案: