CSSベストアプローチは2つの背景ですか？

Question

私は、背景の上部25％にいくつかの画像を持っているデザインを持っています。それは残りの部分を繰り返すことができる単純なグラデーションです。

画像を一番上に置いて、残りのページにグラデーションを塗りつぶすのに最適な方法は何ですか？

私はこのアプローチを取った：

html{ 
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0; 
} 

body { 
    text-align: center; 
    font-family: Arial; 
    line-height: 1; 
    width: 100%; 
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px; 
} 

しかし、コードの一の実装ではHTMLのための背景画像が表示されませんか？

助けが必要ですか？

Answer 1

コントラーあなたが言ったことは、にhtmlの背景を持つことができます。

あなたのアプローチはほぼあります。height: 100%とmin-height: 100%でこれを試してください。偽だ

http://jsbin.com/omikuy

html, body { 
    margin: 0; 
    padding: 0; 
} 
html { 
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0; 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    text-align: center; 
    font-family: Arial; 
    line-height: 1; 
    width: 100%; 
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px; 
} 

Answer 2

これを行うための最善の方法は、身体の背景にグラデーションを持っているだけで以下のクラスとイメージのためのdivを作成するには、次のようになります。

.div_bg { 

position:absolute; 
width:100%; 
height:100px; (or whatever) 
top:0px; 
background-image:whatever; 
repeat:repeat-x; 

} 

、ホワイトスペースをelimateする（HTMLはこれを持っていることを確認してください）上：

html { 
margin: 0 auto; 
} 

Answer 3

クロスブラウザではなく、セマンティック

最もクロスブラウザのソリューションは、すべてのCの周りのラッパー<div>を持っているだろう1つの背景をそれに適用し、1つを背景に適用します。

少ないクロスブラウザが、より多くのセマンティック

あなたも1つの背景適用する擬似要素を使用して試みることができる：

最も進歩的な方法がある

body:after { background: .... } 

最小クロスブラウザ、ほとんどのセマンティックをCSS3で複数の背景を使う方法

body { background: url(...) top center, url(...) top center repeat-y }