背景に合わせるヘッダー画像

Question

ヘッダーセクションに画像がありますが、画像全体がフルスクリーンで表示されません。

イメージしてください以下を参照してください。

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; 
} 

Answer 1

bacground-size:cover;を試してみてください。

動作しない場合は、画像の幅を100％に設定してください。 Like：width:100%;

Answer 2

CSSで幅100％を試してみました。あなたはブートストラップや他の類似のフレームワークを使っていますか？

Answer 3

行の高さと余白を大きくすると、イメージが正しく表示されます。このスニペットを試してください。

<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>