пересекающийся фон сверху и снизу

Enkee · December 9, 2011

Народ, бьюсь над простой, казалось бы задачей, но не могу справиться никак.

Есть сайт из трёх дивов - шапка, тело, низ. Пока дивы, потом может быть таблицу сделаю. Не суть важно.


<body>
    <div class="bgtop"></div>

    <div id="header">header</div>

    <div id="body"> body </div>

    <div id="footer">footer</div>

    <div class="bgbottom"></div>    

</body>

Нужно в разметку добавить фоновую картинку сверху и фоновую картинку снизу. Верхняя начинается с начала экрана, нижняя лежит на футере (id="footer")

Причём нижняя может налезать сверху на верхнюю (там футер png с прозрачностью)

Собственно bgtop и bgbottom это фоновые дивы.


.bgtop
{
    width: 100%;
    height: 1300px;
    background-image: url('/Images/top.jpg');
    background-position: center top;
    background-repeat: no-repeat;

}

.bgbottom
{
    background-image: url('/Images/bottom.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 775px;
    width: 100%;
}

#header, #body, #footer
{
    width: 1000px;
    margin: 0 auto;
}

#header
{
    height: 180px;
}

#body
{
    min-height: 1000px;
}

#footer
{
    height: 115px;
}

У меня не получается правильно расположить bgtop И bgbottom через position, z-index, и добиться чтобы они скроллились с контентом.

Может быть я вообще неправильно делаю.

Помогите пожалуйста.

Softlink · December 9, 2011

Вместо .bgtop вешайте фон на body и не надо никаких индексов

Enkee · December 9, 2011

Вместо .bgtop вешайте фон на body и не надо никаких индексов

Дык это да... но bottom...

в общем сделал я таким макаром

body 
{
    background-image: url('/Images/top.jpg');
    background-position: center top;
    background-repeat: no-repeat;
}

.bgtop
{
    display: none;
    /*z-index: -2;
    width: 100%;
    height: 1300px;
    margin-bottom: -1300px;
    background-image: url('/Images/top.jpg');
    background-position: center top;
    background-repeat: no-repeat;*/
}

.bgbottom
{
    z-index: -1;
    width: 100%;
    height: 775px;
    margin-top: -775px;

    background-image: url('/Images/bottom.png');
    background-position: center bottom;
    background-repeat: no-repeat;
}
.clear_bottom
{

    z-index: 1;
    background: white;
    width: 100%;
    height: 1000px;
    position: fixed
}

clear_bottom пришлось добавлять в конце разметки, потому что фон body перекрывает сам body опускаясь ниже него и я перекрываю его этим элементом

Но вообще как то... не айс...

Попробую растянуть body по высоте на весь экран и сделаю табличную разметку с плавающим .body

Sign In

пересекающийся фон сверху и снизу

Question

Enkee

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

Enkee

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information