fit background header image

У меня есть изображение в разделе заголовка, но не все изображение отображается на весь экран.fit background header image

Смотрите ниже изображений, пожалуйста:

Full browser windows screen:

изображение становится нужным без разреза, если изменить размер окна, чтобы снизить, как это:

Image on resizing window size smaller

Я хочу изображения, чтобы соответствовать в полноэкранном режиме без какого-либо разреза, который получается, когда мы уменьшаем размер окна браузера. Благодаря!!

Код:

<!-- Header Section START--> 
<div class="header"> 
<div class="row"> 
    <div class="col-md-5"> 
     <h2 style="padding-left:10px;color:white;">Online Video Gallery <span class="glyphicon glyphicon-film fa-lg" style="color:black;"></span></h2> 
    </div> 
    <div class="col-md-offset-4 col-sm-3"> 
     <p style="margin-top:20px;"> <input type="text" name="search_box" placeholder="Search here">&nbsp;<input type="submit" name="search_btn" value="Search"></p> 
    </div> 
</div> 
</div> <!-- Header END-->

CSS код класса .header:

.header { 
width:100%; 
height:100%; 
background-image: url(/image/header.jpg); 
background-size: cover; 
border-radius:4px; 
}

источник

2016-06-25 Natha Odedara

Попробуйте bacground-size:cover;.

Если он не работает, установите ширину изображения на 100%. Вроде: width:100%;

источник

2016-06-25 01:45:42

Пробовал. Я отредактировал сообщение с кодом, пожалуйста, проверьте и исправьте меня. Спасибо –

Я предполагаю, что есть некоторые ненужные отступы и разметка. Установите их на ноль. '.heading {padding: 0; margin: 0;} 'Удалить свойство фона. Если все же он не работает, добавьте универсальный селектор. Например: '* {padding: 0; margin: 0;} ' –

все еще не работает, и если я удалю размер фона, который не соответствует ширине 100%. Я показываю только ширину 90%. –

Я бы попробовал ширину 100% в CSS. Используете ли вы бутстрап или другую структуру, похожую?

источник

2016-06-25 01:47:07 kevin3954

Я использую бутстрап. Я попробовал ширину: 100%; уже. Я отредактировал сообщение с кодом, пожалуйста, проверьте. –

Увеличение высоты и заполнения строки приведет к правильному отображению изображения. Попробуйте этот фрагмент.

<div class="header"> 
<div class="row" style="background-color:black;height:120px;padding:15px;"> 
<div class="col-md-5" > 
<h2 style="padding-left:10px;color:white">Online Video Gallery <span 
class="glyphicon glyphicon-film fa-lg" style="color:black;"></span></h2> 
</div> 
<div class="col-md-offset-4 col-sm-3"> 
    <p style="margin-top:20px;"> <input type="text" name="search_box" 
    placeholder="Search here">&nbsp;<input type="submit" name="search_btn" 
value="Search"></p> 
</div> 
</div>

источник

2016-06-25 03:43:52

Это не поможет. Он по-прежнему выглядит следующим образом: http://imgur.com/32ShToI, и именно так я хочу, чтобы изображение отображалось на полном экране: http://imgur.com/3L0UHCN –

fit background header image

ответ

Смежные вопросы