У меня есть простая страница с фоном с двумя изображениями, одна слева, одна справа. В основном абсолютный позиционированный фиксированный DIV (#Background), содержащий 2 плавающих DIVs.Наложение фонового рисунка на Div Фоновое изображение

На вершине этого DIVs У меня есть несколько DIVs всех вложенного в container (#mainDIV).

Странно, что я прокручиваю вниз, фон тела перекрывает #Background DIV.

Любые советы?

CSS

* { padding: 0; margin: 0; } 

html, 
body{ 
    min-height:100%; 
    width:100%; 
    z-index:-10; 
} 

#Background{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    z-index:1; 
} 

#Background_Left{ 
    float:left; 
    width:50%; 
    height:100%; 
    background:url(images/background_left.jpg) fixed; 
    background-repeat:no-repeat; 
    background-position:left; 
    background-size:contain; 
} 

#Background_Right{ 
    float:right; 
    width:50%; 
    height:100%; 
    background:url(images/background_right.jpg) fixed; 
    background-repeat:no-repeat; 
    background-position:right; 
    background-size:contain; 
} 

#mainDIV{ 
    position:relative; 
    margin: 0 auto; 
    width:1000px; 
    min-height:100%; 
    z-index:10; 
} 

#BotoesContainer{ 
    position:relative; 
    height:200px; 
    background:url(images/banner.png); 
    background-repeat:no-repeat; 
} 

#ConteudoContainer{ 
    position:relative; 
    padding-bottom:70px; 
}

HMTL

<body> 
<div id="Background"> 
    <div id="Background_Left"></div> 
    <div id="Background_Right"></div> 
</div> 
<div id="mainDIV"> 
    <div id="BotoesContainer"></div> 
    <div id="ConteudoContainer">Put lots of text here to scroll down</div> 
</div> 
</body>

Я удалил все не esencial код, вы можете увидеть текущую страницу с "scroll overlap"Demo here

источник

2015-08-03 Vicente Chazard

Фон тела не перекрывает divs, divs заканчиваются. – trex005

Проблемы возникают из вашей «высоты: 100%» на фоне div. когда вы прокручиваете вниз, div не достаточно высок, чтобы заполнить остальную часть экрана, чтобы вы увидели там немного белого. –

Ваши дивы заканчиваются, когда вы прокрутите вниз , Вы можете держать их на месте, добавив

position:fixed;

в #background

источник

2015-08-03 16:52:37 trex005

Спасибо, что исправил проблему. В основном это была иллюзия, только фоновые изображения, где исправлено, но не контейнер div ... Я понимаю сейчас. –

Я проверил вашу страницу и проверить элемент я обнаружил, что вам нужно добавить position:fixed; вместо position:absolute; в #Background

#Background{ 
    position:fixed; 
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    z-index:1; 
}

источник

2015-08-03 16:59:56

Наложение фонового рисунка на Div Фоновое изображение

CSS

HMTL

ответ

Смежные вопросы