css - 背景图像不在列上重复

Question

右侧列的背景图像有问题。我希望它在主要内容区域的高度发生变化时垂直重复。

任何帮助，将不胜感激

这是我的 CSS

 #rightcol {
        background: #86030b url(images/leftcol-bg.jpg) top repeat-y;
        height:100% !important;
        text-align: center;
        float: right;
        width: 210px;
        padding: 20px auto;
      }

Here is some more of my CSS

    #content-wrapper {
width: 930px;
height: 100%;
margin: 10px auto;
}

#content_main {
height: 100%;
padding: 14px;
top: 0px;
background: #fff;
width: 692px;
float: left;
margin-bottom: 0px;
}

#rightcol {
background: #86030b url(images/leftcol-bg.jpg) top repeat-y;
height:100% !important;
text-align: center;
float: right;
width: 210px;
padding: 0px auto;
  }

感谢您迄今为止的所有帮助

Answer 1

所有父元素，包括正文标签，都需要将高度设置为 100%，以使您的“rightcol”填满页面的整个高度。

这里有一点简单的阅读可能会有所帮助http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Answer 2

尝试这个：

#rightcol {
    background-image:url('images/leftcol-bg.jpg');
    background-repeat:repeat-y;
    height:100% !important;
    text-align: center;
    float: right;
    width: 210px;
    padding: 20px auto;
  }

Answer 3

你需要把你的主要内容和右列都放在一个div包装中，然后把背景放在那个 div 上。