backgroundにfixdとcoverを当てるとレスポンシブ対応がうまくいかない

またまたメンターさんに解決していただいた案件です。

背景だけが思うように表示されない？なぜ？
Cromeの検証ツールだと上手にできてるはずなのに！！！
原因がわからず、precompile何回もし直したり、
puma再起動とか、スマホのキャッシュ消したりSafariとかCromemとか色々試してみたけどどうしてもそこだけ変わらなかった。。

解決策としてはこう記述していたところを

@media screen and (max-width: 768px) {
  body {
  background-image: image-url("back.jpg");
  background-attachment: fixed;
  background-size: cover;
 }
}

↓こう変更しました。

@media screen and (max-width: 768px) {
    body::before {
    background: image-url('back.jpg') no-repeat left top;
    background-size: 100% auto;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 108px;
    content: "";
    z-index: -1;
  } 
}  

でうまくいいきました。