Так что я пытаюсь установить изображение на обложке с 100vh - но у меня очень специфическая ситуация.Изображение обложки фона на 100vh - разница в экране
На моем изображении у меня есть большая тарелка и планшет, которые «лягут» на эту пластину.
Моя цель состоит в том, чтобы сделать это изображение 100vh заголовком, но есть проблема - когда я пытаюсь проверить это на моем большом мониторе, он выглядит нормально, но на мониторе с меньшей высотой он выглядит плохо - мне нужен этот планшет на 100% видимый во всех настольных устройствах.
Проверьте мою скрипку с опцией «Полная страница», чтобы узнать, о чем я.
Я также пытаюсь сделать эту обложку для изображения без планшета, а затем попробуйте поместить другое изображение с планшетом и position:absolute, но мое второе изображение не всегда находится в том же месте, что и ноги, на этой пластине.
Можно ли достичь желаемого?
.cover {
position: relative;
height: calc(100vh - 80px);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
}<body>
<div class="cover">
</div>
</body>
Хорошо, но я должен сказать еще одну вещь - на моей странице у меня есть навигация, которая имеет 80px высоту. На большом экране это выглядит красиво, но на меньшем мониторе (например, высота 780) мой планшет не полностью виден. Так что, может быть, мне нужно что-то вроде фона-позиции: внизу - 80 пикселей справа; Возможно, вы можете проверить мой сайт, чтобы узнать, о чем я, и помочь мне: http://virtualnemenu.pl/ – user2456849
Я не уверен, правильно ли я понимаю, но, возможно, добавление margin-top: 80px; на ваш # домашний заголовок решит эту проблему. –
Thx - это и некоторые корректировки исправить мою проблему. – user2456849