css - カスタム背景画像

Question

css でこのような背景を作成する方法 (中央と最後のブロックには流動的な高さがあります):

良いチュートリアルはありますか？

Answer 1

上部と下部divの要素を作成し、それらのcssを次のように設定します。

#topBGDiv 
{
    width: 100%;
    height: 125px; // Make this the height of the background image in pixels
    background-image: url('dark-gray-ribbon.jpg');
    background-repeat: repeat-x;
    overflow: hidden;
}


#bottomBGDiv 
{
    width: 100%;
    height: 110px; // Make this the height of the background image in pixels
    background-image: url('light-gray-ribbon.jpg');
    background-repeat: repeat-x;
    overflow: hidden;
}

上部の背景画像には、次のような画像を使用します。

そして底のためにこのようなもの：

最後に、ページの背景色のCSSを中間色に設定します。だから、このようなもの：

body
{
    background-color: #C0C0C0;
}

Answer 2

次のように書くことができます：

#top,#bottom
{
    height: 110px; // Make this the height of the background image in pixels
    background: url('BG.jpg') repeat-x left top;
}


#bottom
{
    background-position:left bottom;
}