Как сделать 2 фона на сайте

Смысл такой нужно чтобы для начала был один фон на 433 пикселя вниз а затем другой до самого низа страницы.
Есть такой код что надо добавить и изменить?
/*---------------------General styles start ---------------------*/
body {margin: 0;font: 12px 'Century Gothic', 'Verdana';color: #edd9ac;text-align: center;background: url(/dizayn/1306093317_E1E5EBFBE920F4EEED.jpg) fixed no-repeat center 450px;}
td, input, select {font: 11px 'Century Gothic', 'Verdana';}
body a {color: #fff;text-decoration: underline;}
body a:hover {text-decoration: none;}
* {}
img {border: 0;}
a.noun img {margin: 2px;}
.clear {clear: both;}
h1, h2, h3, h4, h5, h6 {}
hr {border: 0; height: 1px; background: #42352b;}
*:focus {outline: none;}
.u-star-rating, .u-star-rating a {margin: 0! important;padding: 0! important;font-family: 'Times New Roman',serif;}
/*---------------------General styles end ---------------------*/

/*All content, common styles*/
#wrap {padding-bottom: 28px;background: url(/dizayn/1306093317_E1E5EBFBE920F4EEED.jpg) scroll no-repeat center 450px;}
#container {width: 922px;margin: auto;text-align: left;background: url(/dizayn/light-backgrounds.jpg) fixed repeat-y top center;}
.content-bottom {padding: 0 0 4px 0;margin: 0 0 50px 0;background: url(/.s/t/789/3.png) no-repeat bottom left;}
.content-mid {background: url(/.s/t/789/4.png) repeat-y top left;}
.sidebar {float: left;width: 170px;margin: 0 0 0 25px;}
.content {float: right;width: 660px;margin: 0 53px 0 0;background: url(/.s/t/789/5.jpg) no-repeat top right;padding: 25px 0 10px 0;}
/*-----------*/