自定义背景图片

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