CSSのページの50％に背景テクスチャを設定するには

Question

表示されているページの高さが50％になるように背景テクスチャを表示する方法を工夫しています。半透明のテクスチャは、堅実な背景色を上回ります。私は、ページ全体の上に背景色をしたいが、ページの高さの50％でテクスチャを停止するが、それをやる方法が少し失われている、これは新しいcss3関数ですか？これが古いブラウザではうまくいかない場合は、他のブラウザやjqueryの代替手段が必要ですか？

body { 
background: url(../images/light/background.png) repeat scroll 0 0 #832029;} 

Answer 1

高さが50％という考え方が最良のアプローチであるかどうかはわかりません。

はこれを試してみてください（あなたが現在行っていない）背景画像のサイズを変更

body{ 
    background-color: #832029; 
    background-image: url(../images/light/background.png); 
    background-repeat: repeat-x; 
} 

は、すべてのブラウザでサポートされていないCSS3の機能であるため、定着画像の高さ（300〜400かそこらピクセル）おそらく最も良いでしょう。

Answer 2

CSS3には、background-sizeというプロパティがあり、すべての主要なブラウザ（IE9 +およびOpera 10+）でサポートされています。 IE8以下では、IE Filter

2つの背景画像を作成します。 1つの画像はグラデーション（これはCSS3: linear-gradientでも可能です）で、2番目の画像はテクスチャです。 multiple backgroundsを使用し、テクスチャの背景イメージに背景サイズのみを設定します。

---

このCSS3プロパティを使用しない場合は、HTMLとCSSのみで解決できます。呼び出された#backgroundの内側にdivを作成します。 CSSを使用すると、絶対的な位置と高さが50％になります。

#background 
{ 
    position: absolute; 
    z-index: -1; // place it on the lowest layer 
    top: 0; right: 0; bottom: 50%; left: 0; 
    background: url('path/to/images/background.png') repeat scroll #832029; 
}