视口适配场景下图片无法正确叠加的问题求助

各位大佬好！我最近在折腾自己的网站响应式适配，想让它能完美适配各种屏幕尺寸，但卡在一个头疼的问题上：元素没法在跟随屏幕缩放的同时正确实现叠加效果。

我排查后发现是固定定位（fixed positioning）在搞怪——用fixed的时候图片能正常叠加，但屏幕缩放时元素布局就乱了；可不用fixed的话，缩放倒是正常了，图片又没法叠加了…

目前我写的代码片段如下：

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  
  body {
  background-image:url('epicbackground2.jpeg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:100% 100%;
  }
  

  </style>
 
    
    <title>The web site of dewd</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in ... -->
</html>

有没有懂的朋友能给我支个招呀？万分感谢！

备注：内容来源于stack exchange，提问作者SoundProof