Dva elementa, na gornji staviš background bez gradienta sa repeat (ne x ili y, samo repeat).
Donji element ima gradientni background određene visine i on je samo repeat-x.
Bitno je da se donji kraj elementa sa gradientom matcha sa slikom koja je u backgroundu stranice.
Evo ovo je što se tiče samog CSS-a, a ako te zanima kako namjestiti sliku da tako izgleda, onda sam ja krivo shvatio pitanje
Primjer:
html:
<body>
<div id="container">
bla bla bla
</div>
</body>
css:
body{ background:url(neki-back-bez-gradienta.jpg) repeat 0 0; }
#container{ background:url(neki-back-sa-gradientom-fiksne-visine.jpg) repeat-x 0 0; }