自定义背景图片

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; 
}