Repositioning parallax background-position

Question

On the right side of my site, I have parallax scrolling images so I'm trying to reposition the .image-greet element so that when you are at the top of the website, the bottom of the rose image is centered and fills up the window pane.

Currently, only the top of the image brick wall is showing. I'm having difficulties modifying the background-position so that it moves up the image.

I tried using different variations of background-position, background-position-x, background-position-y, and changing offsets but I've struggled to get it right.

Here is the complete code in action: https://jsfiddle.net/38wu4dcs/7/

.image-greet,
.image-greet.load {
  
  grid-column: images;
  background: url("https://i.stack.imgur.com/R8xTF.jpg");
  margin: 6% auto;
  width: 75%;
  background-repeat: no-repeat;
  background-color: white;
  background-attachment: fixed;
  height: 55%;

  background-size: 40% auto;
  background-position: 90% 20%;
}

Thanks for all the help!

Answer 1

I figured it out through this resource: https://css-tricks.com/positioning-offset-background-images/

"If you need to position a background-image in CSS 20px from the left and 10px from the top, that’s easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom?"

So I applied it and did

background-position: right 25px bottom 250px;