How to stretch image with background-attachment: fixed to a transform: scaled div?

Question

I have a center div which has a background image and content, which is also scaled to fit some devices.

So div has transform: scale(1.5), which has a background with background-attachment: fixed; to keep the background in place. But I cannot figure out how to stretch the image to fit the whole div.

I have no luck playing around with background-size. Applying a transform to the image transform: translateY(-10%) does move the image up, but those seem like magic numbers. Anyone got an idea?

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/

Answer 1

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;
  overflow: hidden;
}

#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: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<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>