всем доброго времени

запарился искать и решил спросить у знатоков
как через CSS сделать двойной фон?
т.е. чтобы одна картинка заполняла повторением, а вторая была закреплена в верху в центе.
ещё также интересно как сделать чтобы картинка которая сверху повторяла себя но только в шапке сайта по горизонтали, а не заполняла собой весь фон?
для первого вопроса нашел чтото похожее решение

<title>Sky Background Example - 2</title>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background: url(images/sky.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#content {
width: 852px;
margin: 205px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
h1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
если это единственное решение подскажите пожалуйста как правильно его разместить.