Help to deal with the adaptation of the header, tried through media queries, but also fail

<header class="head_bg"> <div class="container"> <div class="row"> <div class="logo navbar-header"> <button type="button" class="navbar-toggle glyphicon glyphicon-th-list" data-toggle="collapse" data-target="#responsive-menu"> <span class="sr-only">Открыть навигацию</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class=" navbar-logo"> <div class="navbar navbar-right collapse navbar-collapse" id="responsive-menu"> <ul class="nav navbar-nav navbar-right"> <li> <a class="" href="#">069842020</a> </li> <li> <a href="#">COMANDA APEL</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">RO <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">RU</a> </li> <li> <a href="#">EN</a> </li> </ul> </li> </ul> </div> <div class="logotip col-xs-6 col-sm-6"> <img src="images/logo_one.png" class="img-responsive im_left " alt="">&nbsp; <img src="images/logo_two.png" class="img-responsive im_right" alt=""> <div class="text"> <h1>BMW<br> X5</h1> <h2>INCONFUNDABIL</h2> <div class="btn"> VEZI OFERTA <i class="glyphicon glyphicon-arrow-right"></i> </div> </div> </div> </div> </div> </div> </div> <div class="indent-header"></div> </header> header.head_bg{ background: url(../images/head_bg.png) no-repeat top center; background-size: 100%; } div.indent-header{ min-height: 267px; } div.logo{ padding: 0px 0px 0px 15px; width: 100%; }

enter image description here

enter image description here

    2 answers 2

     .fon4ik { background-image: url(https://ytimg.googleusercontent.com/vi/f2BpWgnVgmo/mqdefault.jpg); /* Путь к фоновому изображению */ background-attachment: fixed; /* Фиксируем фон веб-страницы */ background-repeat: no-repeat; background-size: 100%; /* Современные браузеры */ } 
     <body class='fon4ik'></body>

    Here is the solution, try stretching.

      If there are no more elements after the header, then it is better to apply background to the body, if you need to stretch the header to the full height of the screen, then you can apply

       height: 100vh; /* высота секции равна высоте области просмотра */

      Read more: habr