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

【问题标题】：CSS Sidebar Menu Background Image IssueCSS侧边栏菜单背景图像问题
【发布时间】：2019-04-07 22:23:49
【问题描述】：

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

示例：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) 显示，不会填满侧边栏。我错过了什么？

【问题讨论】：

标签： css background-image sidebar

【解决方案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;

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：