Имеется блок шапки сайта размерами 67% высоты, 100% ширины, фоном этого блока является изображение, которому присвоен background-size: cover;, проблема в следующем, на мобильных устройствах, или при обычном уменьшении области просмотра сайта изображение как и должно обрезается по бокам, но мне нужно, чтобы изображение отображалось полностью. Прописывал background-size значение contain, но так как высота блока задана, появляются белые большие полосы. Я пробовал ставить значение высоты этого блока auto, но таким образом, изображение просто пропадало. Надеюсь на вашу помощь, сломал уже всю голову.
Ниже код html этих элементов:
<body>
<div id="wrapper">
<div class="header"> <!--блок шапки сайта-->
<div class="contact">
<p class="text-head1"> Тел: ***</p>
<p class="text-head2"> Адрес: *** </p>
</div>
<div class="contact1">
<!--<p class="text-head2"> Мы вконтакте</p>-->
<a href="https://vk.com/public***"><img src="psdsite/VK.png"></a>
</div>
</div>
</div>
</body>
css код элементов представленных в html:
body {
padding: 0;
margin: 0;
display: table;
width: 100%;
height: 900px;
}
#wrapper{
height: 900px;
margin: 0 auto;
}
.header {
background: url(image/head.jpg) no-repeat top;
background-position: center center ;
height: 67%;
width: 100%;
background-size: cover;
}
