背景重复：repeat-y; 不工作

Question

I'm quite new to CSS and for sure I'm missing something basic here but I really can't figure it out. This is the code:

In HTML I have this:

<div class="tab-left"></div>

In CSS:

.tab-left {
    background-image: url(images/left.png);
    background-repeat: repeat-y;
    position: absolute;
    width: 96px;
    height: 1049px;
    margin-left: -40px;
    z-index: 99999;
    }

However, the repeat-y property does not work. This is the site in question: http://ziontouch.com/wordpress/

What am I doing wrong?

Answer 1

Your repeat is working fine. The problem is that the height isn't tall enough to reach the bottom edge of the page.

Answer 2

The background is repeating.

The problem is that the .tab-left has an explicit height set, which isn't as tall as you are expecting.

Answer 3

它可以工作，但是您的DIV元素的高度不足以填满整个空间...

Answer 4

重复，直到您的height属性指定的最大1049px。

Answer 5

You should use a bigger height.

.tab-left {
    height: 1622px;
}

That reaches exactly the beginning of the border bottom.

Answer 6

just replace with the following code:

.tab-left {
   background-image: url(images/left.png);
   background-repeat: repeat-y;
   position: absolute;
   width: 96px;
   height: 1610px;
   margin-left: -40px;
   z-index: 99999;
}

EDIT right tab is the same

.tab-right {
   background-image: url(images/right.png);
   position: absolute;
   width: 96px;
   height: 1610px;
   margin-left: 864px;
   z-index: 99999;
}

Answer 7

I see that you're using jQuery in your page so what you can do is use jQuery to find the height of your div#page and use that value to set the heights of your tab-left and tab-right classes.

Like this:

$('div.tab-left').css('height',$('div#page').height());

$('div.tab-right').css('height',$('div#page').height());

Then as content is added to your page, it will adjust as necessary.