html - background-attachment で画像を引き伸ばす方法: 変換に固定: スケーリングされた div?

Question

背景画像とコンテンツを持つ中央の div があり、一部のデバイスに合わせてスケーリングされています。

したがって、 div には がtransform: scale(1.5)あり、 background-attachment: fixed;背景を所定の位置に保つための背景があります。しかし、div全体に合わせて画像を引き伸ばす方法がわかりません。

background-size で遊んで運がありません。画像に変換を適用すると画像transform: translateY(-10%)が上に移動しますが、それらは魔法の数字のように見えます。誰でもアイデアを得ましたか？

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#content {
  height: 100%;
  width: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

#center {
  transform: scale(0.5);
  width: 200px;
  height: 800px;
  position: relative;
  background-color: red;
}

#text {
  color: blue;
  position: absolute;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#img {
  background-image: url("https://i.imgur.com/CVdJba5.png");
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

<div id="content">

  <div id="center">
    <div id="img">

    </div>
    <div id="text">


      content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent
      content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content
      content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content
      content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content
      content contentcontent content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content
    </div>
  </div>
</div>

Jsfiddle: https://jsfiddle.net/a85qev0h/3/