css - 画面サイズが変わると、レスポンシブ Web サイトの背景画像が収まらない

Question

レスポンシブ Web サイトの背景を Web サイトの残りのコンテンツに適応させて移動させるにはどうすればよいですか?

私の背景は分割されており、背景全体をカバーするのではなく、部分的にのみ、各側面が異なる色 (灰色) になる効果を作成します。

ただし、画面のサイズを変更すると、すべての要素が移動し、背景が最初の位置に配置されなくなります。

ウィンドウのサイズに関係なく、「灰色のバー」が常にメインコンテンツに収まるようにするにはどうすればよいですか?

この写真を見ると、次のようになります。

また、背景画像とサイト ラッピングのスクリプトは次のとおりです。

.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
    color:#555;
}

.site-wrap {
    position:relative;
    min-height:100%;
    background-color:#ebebeb;
}

ウェブサイトはこちらからご覧いただけます。