2012-01-26 15 views
1

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

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

答えて

1

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

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

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

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

+0

ありがとうございます:-)、なぜあなたは50%というバックグラウンドを持つのがよいアプローチではないと思いますか? –

+0

background-sizeは現在のすべてのブラウザでサポートされています... http://caniuse.com/background-img-opts –

+0

@WouterJ:IE8(およびIE7 ...)をサポートしてください。 – Derek

1

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; 
} 
関連する問題