CSS侧边栏菜单背景图像问题

Question

我试图用背景图像复制侧边栏菜单的这种样式，但是当我使用相同的样式表代码和图像时，它不能跨越侧边栏的整个高度。

示例:http://demo.ponjoh.com/Simpla-Admin/index.html

使用的css(在示例站点和我的站点):

 #sidebar {
    background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
    color: #888888;
    font-size: 11px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 230px;
}

在我的网站上，图像只显示在它的实际尺寸(230x197)，不填边栏。我错过了什么?

Answer 1

编写该CSS的人将侧边栏的背景图像实现了两次。一次在正文，一次在侧边栏。

body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
    /* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}

你错过了什么:

background: url("../images/bg-sidebar.gif") repeat-y top left;

Answer 2

如果背景图像是可重复的图像…将no-repeat改为repeat或垂直repeat-y

Answer 3

您必须将bottom: 0;和position: relative;添加到#body-wrapper并激活background-repeat。但是要注意!这是一种非常肮脏的CSS编码方法，可能会导致误解和失败——但它仍然可以工作。

#body-wrapper {
    /* Your code stuff ... */
    position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
    width: 230px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
    color: #888888;
    font-size: 11px;
}