背景图像高度 - 不应指定

Question

我认为我的问题非常基础，出于某种原因，我的背景图像不是垂直重复的。谁能明白为什么？

body
{
background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap 
{
width: 100%;
margin: 0 auto;
text-align: left;
width: 880px;
}
#global-inner 
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 0 0;
/*overflow: visible;*/
text-align: left;
width: 880px;
}

Answer 1

根据评论，这里有点回答：

我们的想法是让您的图片（/images/main_bg.gif）宽880px，1px高（或24px，无论数字是多少。）

repeat-y声明中有background，这意味着图片会以#global-inner的背景无限向下重复。

#global-inner的高度，以及背景图像的高度，将取决于此元素内容的高度。

如果您想确保身高至少为800px，则可以改为使用min-height: 800px。

Answer 2

图片高度不是880px，而是宽度为880px。高度仅为20px。

以下是用于背景的原始图像。

它只是在CSS中使用repeat-y将其扩展为#content Div所具有的任何大小。

它还简单地将背景图像与4个单独的角落div与角落背景图像重叠。

以下是在那里所做的模板。

<div id="content">
    <div id="top-left-coner'>
    </div> 
    ...
    <div id="top-right-coner'>
    </div>
    ...
    <div id="bottom-left-coner'>
    </div>
    ...
    <div id="bottom-left-coner'>
    </div>
    ...
    <div>
    </div>
</div>

然后使用CSS分配背景图像。