2个背景的CSS最佳方法？

Question

我的设计在前25％的背景中有一些图像，然后它只是一个简单的渐变，我可以重复其余的。

将图像放在顶部的最佳方法是什么，然后使用渐变填充页面的其余部分？

我采用了这种方法：

html{
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
}

body {
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

但是在代码的一个实现中，HTML的背景图像没有出现？

任何帮助？

Answer 1

与上述内容相反，您可以拥有html的背景。

您的方法几乎就在那里，请使用height: 100%和min-height: 100%进行尝试。

http://jsbin.com/omikuy

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
    height: 100%;
}
body {
    min-height: 100%;
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

Answer 2

跨浏览器，但不是语义

最常见的跨浏览器解决方案是在网站的所有内容周围都有一个包装<div>，然后将一个背景应用于它，一个应用于正文。

较少的跨浏览器，但更多语义

您还可以尝试使用psuedo元素应用一个背景：

body:after { background: .... }

最少交叉浏览器，但大多数是语义

最先进的方法是在CSS3中使用多个背景

body { background: url(...) top center, url(...) top center repeat-y }

Answer 3

执行此操作的最佳方法是将正文背景设为渐变，然后使用以下类为图像创建div：

.div_bg {

position:absolute;
width:100%;
height:100px; (or whatever)
top:0px;
background-image:whatever; 
repeat:repeat-x;

}

并确保HTMl具有此功能（以顶部为空白区域）：

html {
margin: 0 auto;
}