How-to position a background within a specified grid column?

Question

I have a grid with two columns. On the right column I'm trying to implement the parallax background effect when scrolling, but for some reason, the background looks like it is being centered from the middle of the screen. How do I position the background so that it is within only the right column's grid?

header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

body {
  height: 10000px
}

.navLink {
  padding: 0 25px;
}

#logo {
  width: 5%;
  height: 5%;
}


/*.container
{
 display: grid;
 grid-template-columns: [content] minmax(0, 1fr) [images] minmax(0, 1fr);
}*/

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr
}

.content {
  grid-column: content;
  background: blue;
}

#l-splash {}

.images {
  grid-column: images;
  background: yellow;
}

.spacing {
  height: 100px;
}

.image-block {
  width: 400px;
  height: 200px;
  margin: 0 auto;
}

#r-splash {}

    <div class="container">

      <div class="content">
        <div id="l-splash">
        </div>
      </div>

      <div class="images">
        <div class="spacing"></div>
        <div id="r-splash">
          <div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div>

          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
      </div>
    </div>

http://jsfiddle.net/c8jw45ux/1/

Answer 1

When using fixed

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element.^ref

In this case you need to adjust the position/size to make it on the right. Basically the image need to be in the center of the second half of the screen which is 75% but we have to place the center of the image on 75% thus we add 25% of its width (400px defined in the background-size equal to the conainer width). Then we place it at 100px from the top which will give us calc(75% + 100px) 100px/400px auto.

header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

body {
  height: 200vh;
}

.navLink {
  padding: 0 25px;
}

#logo {
  width: 5%;
  height: 5%;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr
}

.content {
  grid-column: content;
  background: blue;
}

.images {
  grid-column: images;
  background: yellow;
}

.spacing {
  height: 100px;
}

.image-block {
  width: 400px;
  height: 200px;
  margin: 100px auto 0;
  background:url(http://placekitten.com/1543/1024)  calc(75% + 100px) 100px /400px auto fixed no-repeat;
}

<div class="container">

  <div class="content">
    <div id="l-splash">
    </div>
  </div>

  <div class="images">
    <div id="r-splash">
      <div class="image-block"></div>

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

The above will work perfectly on big screen when we will have two equal sections. On small screen you may consider media query to adjust the position.

You can increase the size of the image more follwing the logic above:

header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

body {
  height: 200vh;
}

.navLink {
  padding: 0 25px;
}

#logo {
  width: 5%;
  height: 5%;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr
}

.content {
  grid-column: content;
  background: blue;
}

.images {
  grid-column: images;
  background: yellow;
}

.spacing {
  height: 100px;
}

.image-block {
  width: 400px;
  height: 200px;
  margin: 100px auto 0;
  background:url(http://placekitten.com/1543/1024)  calc(75% + 200px) 50px /800px auto fixed no-repeat;
}

<div class="container">

  <div class="content">
    <div id="l-splash">
    </div>
  </div>

  <div class="images">
    <div id="r-splash">
      <div class="image-block"></div>

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

You can get more details about the calculation here: https://stackoverflow.com/a/51734530/8620333