CSSのフルスクリーンの背景画像のサイズ

Question

私はHTMLとCSSが初めてです。基本的なものをいくつか学んだだけです。誰かが私にこの頭痛の問題に関するいくつかの助けと示唆を与えることを願っています。

私は、フルスクリーンの背景画像を必要とするウェブページで作業しています。私は現在、両方のセレクタで "height：100％"を使用しています：htmlと背景を含むセクション。ブラウザの幅をリサイズするとうまく見えますが、ブラウザの高さを変更すると、背景の高さも崩壊します。私が達成したいと思うものは次の通りです：

1. ブラウザのウィンドウがどの画面サイズでも最大になると、背景は水平スクロールバーのないフルスクリーンになります。
2. ブラウザウィンドウの幅が狭くなると、バックグラウンドイメージは常にバックグラウンドに配置されます。
3. ブラウザウィンドウの高さが低くなった場合は、高さを縮小して縦スクロールバーを表示しないでください。私は背景にテキストがあるので。私はテキストを他のセクションに移動したくありません。

さらに、どの画面サイズでも親しみやすいウェブページの作成方法や、任意のサイズ変更アクションについて、いくつかの提案をお願いします。どんなパッケージ？どんなツール？あなたはそれをカバーしたい場合は https://css-tricks.com/perfect-full-page-background-image/

Answer 1

このCSSコードを試してください：引用符は、あなたの外部スタイルシートに次のコードを使用してみてください

Answer 2

この打撃を与えます全ページ：

body { 
    background: url(path/to.image.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

これはすべてのブラウザで有効です。画像のURLをあなたのマシン上のWebアドレスまたはファイルの場所に置き換えます。

html{background:url(folder_name/file_name.jpg) no-repeat center center fixed; 
background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; 
-ms-background-size:cover; 
-o-background-size:cover; 

Answer 3

使用以下body要素で次のCSSコード：あなたが、これはここでどのように機能するかについての詳細情報を取得することができます

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

：

Answer 4

を必要とされていません。

body, 
html{ 
min-height:100%; 
} 
body { 
background-image:url(Beautiful-White-Horse.jpg); 
background-repeat:no-repeat; 
background-size:cover; 
}