2012-01-14 23 views
1

私は以下の画像を使用していますが、そのまま使用しており、画面の100%を占めていません。CSS背景画像 - >画像を使用する

私は、次のオプションを考えてきたが、私は何をすべきかについていくつかのアドバイスいただければ幸いです:木目のタイルを作成します

  1. を?
  2. 木目のストリップを作成しますか?

現在のCSS

html{ 
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll; 
    background-color:#0C0C0C; 
    height:100%; 
    width:100%; 
} 

画像

enter image description here

答えて

3

background-size: 100% 100%;~htmlを追加し、repeat-xno-repeatに変更してください。

デモ:http://jsfiddle.net/ThinkingStiff/jUr9E/

html{ 
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll; 
    background-color:#0C0C0C; 
    background-size: 100% 100%; 
    height:100%; 
    width:100%; 
} 
2

タイルを使用している間、あなたはまだ品質のいくつかの指標を節約しながら、帯域幅のゲインを与えるストリップを使用してxy repeatを使用すると、品質が低下し、帯域幅の保存が向上します。

1

最初に、ソースイメージのラジアルグラデーションを削除します。それから、繰り返すと自然に見えるように、いくつかのスラットでストリップを作成します。グラデーションを再現するには、css3 radial gradient backgroundを使用します。レガシーブラウザのサポートが必要な場合は、勾配の透明なPNGをフォールバックとして追加します。