计算背景图像比率

Question

I have a background-image called 1 at the bottom of my page. I want to show another div with a background-image called 2 over the bottom 5% of background-image 1 (so, not the bottom 30% of the screen but bottom 30% of the image).

However, I have a problem with making this responsive. I think I need to calculate the ratio somehow but I have no idea how. See below for the code I have. Whenever you resize the screen, the size of the background-image 1 changes and the position of the background-image 2 doesn't stay the same. How can I make it stick to one spot no matter what?

JSFiddle: here

Answer 1

Try this out. It seems to meet your requirements and is responsive.

 $(document).ready(heroResize); $(window).on('resize', heroResize); function heroResize() { var marginTop = $(window).height() * 0.8; $('#layer2').css('margin-top', marginTop); }

 #content { position: relative; } .layer { width: 100%; height: 100vh; max-height: 1000px; } #layer1 { background: url('https://cliffsliving.com/wp-content/uploads/2018/02/CLIFFS_DevilsCourthouse_Shoot_2017_3740_cmyk_brighter_PJ.jpg') center top/contain no-repeat #6DB3F2; position: absolute; top: 0; left: 0; } #layer2 { position: absolute; bottom: 0; left: 0; background: url('https://www.pngtube.com/myfile/full/9-93924_png-parallax-background-png.png') center bottom/contain repeat-x; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="content"> <div id="layer1" class="layer"> <div id="layer2" class="layer"></div> </div> </div> <div id="footer"></div> </div>

Answer 2

我不确定我是否正确理解你的问题，但我认为你希望你的 layer2 被包裹在 layer1 中，然后使用 position absolute 和 bottom: 0 所以它总是粘在底部并且相对于父级（在这个情况将是第 1 层）。

Answer 3

You can do this with one element, multiple background and vw unit without the need of JS. The trick is the value 0.877vw which is equal to 5% * height of the image and the the image have a ratio equal to 5.7 and its width will be the window size so 100vw . We will have then: 0.05 * (100vw/5.7) = 0.877vw

 body { margin:0; } .layer{ height:100vh; min-height:60vw; background: url('https://www.pngtube.com/myfile/full/9-93924_png-parallax-background-png.png') bottom, url('https://cliffsliving.com/wp-content/uploads/2018/02/CLIFFS_DevilsCourthouse_Shoot_2017_3740_cmyk_brighter_PJ.jpg') bottom 0.877vw center; background-size:contain; background-repeat:no-repeat; }

 <div class="layer"></div>