Как использовать background-position и background-size в CSS, но также привязать изображение в определенной точке

Question

У меня есть макет, который выглядит следующим образом, с использованием background-position: center и background-size: cover:

Исходное изображение из здесь :

Я бы хотел, чтобы первый пример выглядел так:

Чтобы сделать это, я представляю, как наложить опорную точку на изображение и как-то советую CSS использовать эту опорную точку.

background-position: x y;

Интересно, как мне это сделать.

Я не хочу обрезать изображение, так как при изменении размера экрана или, например, на мобильном телефоне изображение будет отображаться больше.Я хочу, чтобы изображение было таким, как есть.Я также не хочу, чтобы образ сплющенным, я хочу, чтобы работать как background-size: cover работает примерно, но с точкой пользовательских анкерной.

Answer 1

div.relative {
   background: url(mountain.jpg);
   background-repeat: no-repeat;
   background-size: auto;
   position: relative
   top: //what you want  e.g. 20px
   left: //e.g. 40px;
   bottom: //e.g. 80px;
   right: //e.g. 0px;
}