Есть сайт на bootstrap, и есть картинка в хэдэре?

Question

[travinik]

которая на ноутбуках выглядит нормально, а на нестандартных разрешениях и на 1920х1080 не занимает вессь экран. Сайт buhanka23.ru/ - и нужно чтоб картинка с лого адаптивно занимала весь экран при открытии сайта.

Заранее спасибо.

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Картинка задана внутри класса .intro в качестве background. Для картинки задана ширина 100%. Добавьте высоту равную 100vh. height:100vh и картинка будет на всю высоту.
+ советую убрать горизонтальный скролл, он лишний на сайте (overflow-x: hidden;)

Comments

[travinik]

height:100vh - это классу .intro ? А overflow-x: hidden; - body ? При размещении его в body пропадает вертикальный скролл мышью

[Орхан Гасанлы]

travinik, как может вертикальный скролл пропадать, если overflow-x: hidden; должен только горизонтальный скрытся) А height:100vh это к intro

Answer 2

[travinik]

height:100vh решил проблему, спасибо. Если проверять на сайте ami.responsivedesign.is на мобильной версии картинка из шапки прижимается сильно влево, не подскажете почему ?

Comments

[Орхан Гасанлы]

поиграйтесь свойством background-position добавив его к классу intro
сейчас задан background-position:center;
теоретически у вас эмблема отклонена влево - buhanka23.ru/img/intro-bg.jpg
htmlbook.ru/css/background-position

можно сделать по другому.... обрезать эту же картинку, чтобы лого был по центру, а потом к тегу intro добавить медиазапросы и заменить фоновую картинку на обрезанную...
получится, что-то типа:

@media (max-width:768px) {
.intro {
background: url(../img/intro-bg.jpg) no-repeat center center;
}
}

только название картинки смените на обрезанную

[travinik]

azerphoenix, Большое спасибо за ваши ответы, действительно отклонена влево! Удачи вам.