Картинка не входит полностью, как поправить?

Question

[mUchenik]

Всем привет!
Друзья, всех с наступающим НГ!!!
Подскажите, как мне решить мой ребус:
Хочу создать открытку на сайте, но столкнулся с непредвиденной проблемкой...
А именно:
сейчас картинка показывается не полностью.
Как мне сделать, что бы эта картинка занимала весь экран?
В смысле, что бы при открытии этой ссылки, сначала отображалась картинка (открытка), но при перемотке был виден дальнейший контент, т.е. тот контент который находится под открыткой...

Спасибо.

Answer 1

[Ankhena]

Задать размеры блоку с картинкой (предварительно обдумав, что при этом должно делать меню и что пропорции сторон у экранов разные)

width:100vw;
height: 100vh;

background-size: 100% 100% даст Вам заполнение картинкой всей площади блока. Разумеется, с нарушением пропорций, если у картинки и у окна браузера они не совпадают.

Вариант решения: через media запросы скармливать разные картинки в зависимости от соотношения сторон окна браузера.

но столкнулся с непредвиденной проблемкой...

знаем, знаем, называет эта проблема на букву Г :)

Comments

[mUchenik]

Спасибо большое!
И еще раз с наступающим!!!

Answer 2

[mUchenik]

Иван Татауш , Ankhena W
Спасибо за ваши советы.
Но нужного результата увы не узрел...
Вот вид полной картинки размеры 1200*820:

И мне хотелось бы, что бы при загрузке страницы, эта картинка была видна полностью и по всему экрану.
А сейчас по факту, видна верхняя часть картинки, и остальная часть закрыта футером.

Comments

[Ankhena]

Хорошо.
Смените cover на 100% 100%
Только не удивляйтесь что форма домика и елок станет странной.

[Ankhena]

Либо к предыдущему для разных пропорций экрана подгружайте разные картинки через media запросы

[Иван Татауш]

Добиться одинаковой картинки на всех форматах экрана муторное дело, я бы добавил background-position: center;