html,
body {
padding: 0;
margin: 0;
height: auto;
width: 100%;
color: #fff;
text-align: center;
font-size: 20px;
}
#clear_first {
position: relative;
background: #c8504b;
opacity: 0.4;
height: 300px;
width: 100%;
top: 0;
}
#clear_second {
position: relative;
background: #ccc;
opacity: 1;
height: 700px;
width: 100%;
top: 0;
}
#clear_third {
position: relative;
background: #000000;
opacity: 0.9;
height: 700px;
width: 100%;
top: 0;
}
#paral {
position: absolute;
background: url(https://kondainfo.ru/images/delim_10.jpg) no-repeat bottom fixed;
background-size: 100% 200px;
height: 100px;
width: 100%;
margin: 0 auto;
left: 0;
bottom: 0;
border-top: 1px solid;
}
<div id="clear_first">Начало</div>
<div id="clear_second">
<div id="paral">Фото параллакса</div>
</div>
<div id="clear_third">Конец</div>
Здравствуйте всем! Помогите пожалуйста зафиксировать фон блока div, чтоб он смог останавливаться, а не проваливаться в бездну вместе с ползунком. Решил добавить на свой сайт (я ещё совсем новичок) простой как табурет эффект параллакса. Код обрезал.
jsfiddle.net/acsoncry/655zna8L
Проблема заключается в том, что изображение в высоту всего 200 пикселей, а сам блок в два раза тоньше. Когда прокручиваешь страницу вниз, в какой - то момент картинка параллакса прокручивается и изображение исчезает, оставляя пустую область. Перепробовал множество способов создания параллаксов, включая остановку блока при достижении другого (сам ступил, блок же на месте стоит, двигается только картинка...), но там рассматриваются крупногабаритные фото, заменяющие друг друга. В моём же случае блок узкий и картинка как бы "прыгает" там, но дна у блока нет. Возможно каким-либо способом ограничить высоту самого блока? Пробовал сделать background-size: 100% 100%;, но тогда картинку растягивает на высоту экрана... Помогите пожалуйста!