Для начала приведу пример, как должно все работать.
------------------------------------------------------------------------------------------
К примеру, у меня есть блок, размером 100x100 пикселей.
В этот блок я ставлю картинку на задний фон, сама же картинка размером 1000х1000 пикселей.
Затем, так как блок размером 100х100 пикселей, то лишь часть картинки размещается в этом блоке, а остальная часть скрыта (находится за блоком).
Теперь, я хочу, чтобы отображался центр картинки и позиционирую ее по центру с помощью свойства background-position.
Следующий шаг. Мне нужно отдалить картинку. Я отдаляю ее с помощью свойство background-size: 'размер в пикселях'.
Вот код:
https://codepen.io/Eugene_69_/pen/qyPyaO
------------------------------------------------------------------------------------------
Эта была предыстория. Теперь будет самое интересное.
У меня есть блок, но, ширину ему я не указываю, а указываю лишь высоту.
Ставлю картинку на задний фон (1920х900).
Вмещаю картинку в блок: Background-size: cover; .
Позиционирую для красоты: background-position: 40% 50%;
Дальше. Теперь, мне нужен медиа запрос на < 1250px.
Как только у нас экран становится меньше 1250px, то свойство background-size меняется на auto.
Я могу вновь отпозиционировать картинку, но теперь не могу ее отдалить:) Во первых, свойство background-size уже занято, мы сменили на ауто (так надо). Даже, если мы не сменим на ауто, то свойство не будет правильно работать, т.к ширина 100%.
Код:
https://codepen.io/Eugene_69_/pen/gjGjWG
Выручите плз, никто не знает.
Простой
