CODEWITHSUNDEEP
css
George Grigorita
George Grigorita

Reputation: 1900

background-repeat: repeat-y; not working

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?

Upvotes: 1

Views: 12588

Answers (6)

HMartch
HMartch

Reputation: 728

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.

Upvotes: 0

bevacqua
bevacqua

Reputation: 48566

You should use a bigger height.

.tab-left {
    height: 1622px;
}

That reaches exactly the beginning of the border bottom.

Upvotes: 0

Jordan Speizer
Jordan Speizer

Reputation: 573

It is repeating, just up to 1049px as specified by your height attribute.

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30676

It works but the height of your DIV element is not big enough to fill up the whole space...

Upvotes: 0

alex
alex

Reputation: 490607

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

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

Upvotes: 4

Related Questions