I have two layers one on top of the other. The one on the bottom (z index 1) servers as a background and the one on top is the content layer (z index 2) that can expand based on the content. Is there any way to make the height of the background layer (z index 1) grow relative to the layer on top of it (z index 2)?

nope that just can't be done because they are actually just 2 separate divs. But I wonder why you had to do it like this?

i have used them with div's and not with layers so i dont know if it will work.

here it is.

btw this is not my code.

put this as a js file or have it in the head - ur preference.

function P7_colH(){ //v1.6 by PVII-www.projectseven.com
 var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
 for(i=0;i<dA.length;i++){dA[i].style.height='auto';}for(i=0;i<dA.length;i++){
 oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i<dA.length;i++){if(an){
 dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){
 for(i=0;i<dA.length;i++){hh=dA[i].offsetHeight;if(hh>h){
 dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;}
 document.p7eqth=document.body.offsetHeight;
 document.p7eqtw=document.body.offsetWidth;}
}
function P7_eqT(){ //v1.6 by PVII-www.projectseven.com
 if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
 P7_colH();}
}
function P7_equalCols(){ //v1.6 by PVII-www.projectseven.com
 if(document.getElementById){document.p7eqc=new Array;for(var i=0;i<arguments.length;i++){
 document.p7eqc[i]=document.getElementById(arguments[i]);}setInterval("P7_eqT()",10);}
}
function P7_eqA(el,h,ht){ //v1.6 by PVII-www.projectseven.com
 var sp=10,inc=20,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
 ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
 oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
 if(nh<adT){setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);}
}

and in your body tag

onload="P7_equalCols('id1','id2')">

the layers need to have an id assigned to them.

let know if this works.

Why not just apply the background to the content div? Also try putting the content div inside the background div and give it 100% width and height.

Thanks Y'all. I don't have a whole lot of experience with div's for the actual positioning of content on a page (table junkie... I know I know).

praveen,
Thanks for the script, it looks like it does what its supposed to do, but wont work with my scenario...

I think I'm with amygdela on this one, I'm going back to the drawing board to re-evaluate the layout and what the best approach should be.

Thanks to all for pointing me in the right direction

Just drop your image from the background-div into the actual background of the overlaying div.

CSS:

 
#divimage {
background: #FFFFFF url(images/image.jpg) top left repeat-y;
width: 300px;
min-height: 200px;
}

HTML:

<div id="divimage">
    <p>This is your text on the background, in the div</p>
</div>

But considering the fact that this is just too easy, I bet you reckon something else?