Div同じサイズの背景画像

Question

私は背景画像を持つdivを持っていて、ウィンドウのサイズを変更するときにdivをバックグラウンド画像と同じサイズにしたいので、その中心にいくつかのテキストを置くことができます私は応答するようにイメージしたいので、divも。

画像とテキストのための私のhtml：

<div id="headerimg" class="header"> 
    <h1>Welcome to my website</h1> 
</div> 

とこれまでのところ、それは私のcc：私はちょうどGoogleのATMからランダムに画像を使用しています

#headerimg{ 
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed; 
    background-size: cover; 
    width:100%; 
} 

.header{ 
    height: 700px; 
    width: 100%; 
    margin: auto; 
    padding: 20%; 
    color: white; 
    text-align: center; 
    font-size: 50px; 
} 

、病気の後に交換してください。しかし、とにかく..私はどのように高さをいつでも調整することができますか？おそらくJquery？しかし、本当にjqueryに精通していません...そしてはい、私はdivがサイトの全幅になることを常に望んでいます。

Answer 1

あなたのために、次の作業たい何か：もしあなたことを1意味：私はあなたの例の画像はarount 2のアスペクト比を有する、50vwユニットを使用するように、ヘッダーの幅を更新しました

https://jsfiddle.net/44k0320v/

にdivに正しい高さを維持したい場合は、高さをビューポート幅の半分にする必要があります（画面の幅を横切る測定値は100vwです）。

100%ではなくcoverのバックグラウンドイメージを更新しましたので、幅はdivとなります。

また、vw単位を使用するようにフォントサイズも更新しました。以下

新しいCSS：

#headerimg{ 
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed; 
    background-size: 100%; 
} 

.header{ 
    box-sizing: border-box; 
    height: 50vw; 
    width: 100%; 
    margin: auto; 
    padding: 10% 20%; 
    color: white; 
    text-align: center; 
    font-size: 3.5vw; 
} 

Answer 2

jazibobsと同様のソリューション、また、より多くの "flowy" テキストとVWの高さを使用して。現在、背景はかなりの幅に反応しますが、狭い幅ではテキストではあまり意味がありません。このために、メディアクエリを使用して、より小さな幅で背景を非表示にすることも、テキストを小さく設定することもできます。

https://jsfiddle.net/kzhzasot/

#headerimg{ 
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed; 
    background-size: 100% auto; 
    width: 100%; 
    height: 100vh; 
} 

.header{ 
    margin: 0px; 
    padding: 0; 
    color: white; 
    text-align: center; 
    font-size: 50px; 
    display: table; 
} 

h1 { 
    display: table-cell; 
    vertical-align: middle; 
}