CSS：有两种颜色的背景，水平分割，有图案？

以下是我现在拥有的：

background:#FFFFFF url（“whitegrid.png”）重复左上


如何实现这种分割背景效果，在两种颜色上保持重复图案，并使顶部颜色只占页面的固定百分比（例如30%）

谢谢。
这有助于您：


但请注意，这只支持现代浏览器

有时，您可以创建两个类似div的层：

<div class="gradient">
    <div class="pattern">
    </div>
</div>


演示：

我不确定你们所问的是否是我所理解的……但若它像听起来那个样简单，那个么背景是由两个div组成的。您可以使用多个背景/图像，但div在这里更简单、更合适

好吧，它是有效的，但是。。。绝对定位仅用于背景的元素？为什么不使用CSS渐变呢？我想两者都很好…特别是因为现在大多数地方都支持渐变。不要认为需要2
div
s。
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%; position: relative;}
body { background-color: red;}
.nav {height: 50px; background-color: rgb(64, 47, 71);}
.main {
    width: 480px; padding: 40px; background-color: white; height: 400px; margin: auto; margin-top: 30px;
}

.white {
    background-color: orange; width: 100%; height: 200px; 
    position: absolute; top: 50px; z-index: -1;}