Антон Усачев

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: зависит от задачи, по умолчанию центр.
}

Первым слоем картинка (слой с относительным позиционированием). Вторым слоем текст. Третий самый высокий слой – абсолютное позиционирование с картинкой носа. Но есть хитрость: размер холста с носом должен быть на прозрачном фоне размером с картинку с лисой, чтобы при любом размере экрана поведение картинок было идентичным:

Вариаций много, вот одна из них:

Можно наколхозить скрипт для принудительного размещения окна в нужной точке. Для наглядного примера накидал, вариант "outside":

Предпочитаю использовать. Я сторонник практической линии "один блок – одна задача" и всячески к стремлюсь к ее реализации в любом проекте, что делает вместе с БЭМ финальный код чистым, понятным и читаемым. У враппера вполне ясная задача – обернуть весь контент.
Дополнительные обоснования такой обертки могут всплыть уже в процессе работы: изменить фон, сделать скролл при отсутствии такового у боди, добавление эффектов и анимаций для всего контента и много чего еще...