background состоящий из 4 картинок

[Souz21]

Нужна помощь!

Не могу установить background состоящий из 4 картинок

1) image1 должен растягиваться по горизонтали. (bg_gradient_top.png)

2) Далее, на image1 должен накладываться основной background image2 по центру, без размножения (bg_main_header.jpg)

3) image3 должен размножаться во вертикали в центре и спускаться до футера (bg_content_fill.gif)

4) image4, должен находится в футере по центру и без размножения. (bg_main_footer.jpg)

Должно получится так:

css существующего шаблон:

html,body{margin:0px;padding:0px;text-align:left;border:10px;background: url(../images/bg_main_header.png) center top no-repeat;font-family: Verdana, Geneva, sans-serif; font-size:11px;color:#393939;}
a, a img {border: none; outline: none;}
li,form, fieldset, dl, dt, dd, del {margin: 0px; padding: 0px; list-style: none; text-decoration: none; font-style: normal; border: none;}
h4,h5{padding:0px;margin:0px;font-weight:normal}h3 {border-bottom :1px solid; color:#fff;font-size:13px;padding : 0px 5px 2px 10px;}
a{text-decoration:none;margin:0px;padding:0px;color:#3477AC; font-size:11px;}a:hover{text-decoration:underline;color:#FF6693;}
.page{width:1024px;margin:0 auto;margin-bottom:3px;background:#FFFFFF url("../images/footer.jpg") no-repeat; background-position:bottom;}.page div{overflow:hidden}
.page2{width:1024px;margin:0 auto;}.page2 div{overflow:hidden}

css всех четырех картинок:

html{
    min-height:100%;
    background:url(../images/bg_content_fill.gif) top center repeat-y;
}
body{
    background:url(../images/bg_main_footer.jpg) bottom center no-repeat;
    font-family: Arial,Helvetica,Tahoma,Verdana,sans-serif;
    font-size: 9pt;
}
body, #mainhead, #mainwrap{
    min-width:990px;
}
#main{
    width:980px;
    margin:0 auto;
}
#mainhead{
    background:url(../images/bg_main_header.jpg) top center no-repeat;
}
#mainwrap{
    background:url(../images/bg_gradient_top.png) top left repeat-x;
}
#ccwrap, #ccc{
    float:left;
    width:100%;
}
#cc, #cccc, #lc, #rc{
    overflow:hidden;
}
#cc{
    width:740px;
    margin:0 0 0 240px;
}
#cccc{
    width:520px;
    margin:0 220px 0 0;
}
#ccccc{
 width: 739px;
 margin:0 220px 0 0;
 overflow:hidden;
 background:#fff;
}

[lexxcode]

Новый вопрос - новая тема!!! Оформляйте код в тег CODE

[USF]

оберните в несколько div и каждому задайте фон (не забудьте про min-height в случае маленького кол-ва контента, чтобы изображения не накладывались).

+ http://htmlbook.ru/css/background-image в css3 поддерживается указание нескольких фоновых рисунков

Edited September 22, 2012 by USF