Problem with background image in CSS

[Biggles]

i am converting an existing site to a css layout and scraping all the old messy tables layout ( sooo last year ! lol ) but i am having trouble getting a background image to go all the way down the left of the page here is my css code for the box:-


div#left {
width: 180px;
height: 100%;
background-position: left;
background-repeat: repeat-y;
background-image: url(images/bg03.gif);
position: absolute;
top: 110px;
bottom: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
}


the hieght, however, only seems to go down the page about 500px ! dunno why. I have played about with the div tags position in the html but it has no effect other than getting worse. Anyone have any ideas?

here is the layout (a little snippet anyway):-


<div id="left">
<div id="menuleft">
<div id="menuleftitem">
**** link here ****
</div>
<div id="menuleftitem">
**** link here ****
</div>



<div id="boxtop">:: EXCLUSIVE ::</div>
<div id="boxmain">
**** links and text here ****
</div>



<div id="boxtop">:: TOP BRANDS ::</div>
<div id="boxmain">
**** links and text here ****
</div>
</div>
</div>


nb./ This is not inside any other div tags.

can post a link to prob page if needed.

Thanks in advance

[Biggles]

after looking at it agin it seems to be giving me 100% of the viewable screen height (under ie nav bar at top to the 'page fold') rather than 100% of the web page height.

Any hints ?

[cthathem]

If possible .. try the following: Set the background image for the body, not the div, .. that should work. I don't know if this will help you, but it's worth trying ;)

georg

[Biggles]

it works, kinda ! lol i tried it already but it spreads it accross the page aswell when all i want to do is spread it down ! Bring on the old tables ! lol

[Biggles]

Got it sussed now thanks.

I added the following to my css:-

BODY {
text-decoration: none;
font-size: 10pt;
font-family: Verdana, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
background: White url images/bg03.gif) repeat-y left;
}

the new bit is in red

[cthathem]

yeah,... switching from a table based to a css based layout can be quite a pain in the neck. Mh, problem with height:100% is, that the % have to be based on the parent element. In your case that'll be body or some other element you wrap around the div.

Mh, .. I'm not quite sure what you want to achieve though... guess that code example is not the actual markup, is it? All in all it's a better idea to do the background stuff (whole site things) in the body.. so you can be sure that you affect the entire height.

georg

[cthathem]

fine... be sure it's

background: White url('images/bg03.gif') repeat-y left top;

guess that's what it should look like! :)

enjoy,
georg