Изменение положения фона параллакса

В правой части моего сайта есть изображения с прокруткой параллакса, поэтому я пытаюсь изменить положение элемента .image-greet так, чтобы, когда вы находитесь в верхней части сайта, нижняя часть розы изображение располагается по центру и заполняет всю область окна.

В настоящее время отображается только верхняя часть кирпичной стены изображения. У меня возникают трудности с изменением положения фона, чтобы оно перемещалось вверх по изображению.

Я пытался использовать различные варианты background-position, background-position-x, background-position-y и изменять смещения, но я изо всех сил пытался сделать это правильно.

Вот полный код в действии: https://jsfiddle.net/38wu4dcs/7/

.image-greet,
.image-greet.load {
  
  grid-column: images;
  background: url("https://i.imgur.com/aBaG1o8.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%;
}

Спасибо за помощь!


html css background parallax background-position
person Trav    schedule 30.09.2020    source источник
comment
Я немного смущен. При чем тут синяя заставка?   -  person Richard Hunter    schedule 30.09.2020
comment
@RichardHunter Вы можете не обращать внимания на синий фон слева. Я сделал его другим цветом, чтобы показать, что сайт был разрезан пополам.   -  person Trav    schedule 30.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Я понял это через этот ресурс: https://css-tricks.com/positioning-offset-background-images/

Если вам нужно расположить фоновое изображение в CSS на 20 пикселей слева и на 10 пикселей сверху, это легко. Вы можете сделать background-position: 20px 10px;. Но что, если вы хотите расположить его на 20 пикселей справа и на 10 пикселей снизу?

Поэтому я применил его и сделал

позиция фона: справа 25 пикселей снизу 250 пикселей;

person Trav    schedule 30.09.2020