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>

Hello everyone! Please help me fix the background of the div block so that it can stop and not fall into the abyss along with the slider. I decided to add to my site (I'm still quite a novice) as simple as a stool the effect of parallax. The code is cut off.

 jsfiddle.net/acsoncry/655zna8L

The problem is that the image is only 200 pixels high, and the block itself is two times thinner. When you scroll down the page, at some point the parallax picture scrolls and the image disappears, leaving an empty area. I tried many ways to create parallaxes, including stopping the block when another is reached (I set foot myself, the block stands still, only the picture moves ...), but it considers large-sized photos that replace each other. In my case, the block is narrow and the picture seems to be "jumping" there, but there is no bottom for the block. Is it possible to limit the height of the block itself in any way? I tried to make background-size: 100% 100%; but then the picture stretches to the height of the screen ... Help please!

  • I do not remember how many times I re-read, without ever realizing that where I should stop ... - Air
  • Mikhail Astakhov, consider for the future, if you want to get help, arrange the question correctly ... - Air
  • as I could and designed - Mikhail Astakhov
  • on the site, there are certain rules ... it will be useful to read ru.stackoverflow.com/tour - Air

1 answer 1

As I understand it in your case background-size: cover; . But besides that, I would reduce the picture a bit so that its width would be approximately exactly the width of your block, only then would it be placed in the background. That all parts of the picture would be normally visible.

 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: cover; background-position: left center; height: 100px; width: 100%; margin: 0 auto; left: 0; bottom: 0; border-top: 1px solid; } 
 <body> <div id="clear_first">Начало</div> <div id="clear_second"> <div id="paral">Фото параллакса</div> </div> <div id="clear_third">Конец</div> </body>

  • ah that's what it is about ....))))) - Air
  • @Air The code in the jsfiddle example gives exactly the error that the author was talking about. - Raz Galstyan
  • damn, I’ll probably have to tune the parallax with js ... with a carpet, the picture doesn’t stretch, but just grows to gigantic sizes :) - Mikhail Astakhov
  • @ Mihail Astakhov look at what the carpet does, and I also wrote there what to do with the size of the image - Raz Galstyan
  • I understood, thank you :) I just have a lot of thin and wide strips on the page, so the carpet deforms them. therefore, here it is only to fix it and slow down the scrolling speed of the element ... anyway, thanks for the help! - Mikhail Astakhov