[RESOLVED] Problem with 2 background images [Archive]

leighchic

08-13-2008, 05:27 AM

Im having a problem with creating my left navigation section.

I have these 2 images (attached)

leftBack.jpg, which needs to sit at the top of my leftContainer div
and then the rest of it - leftBackRepeat which must tile repeatidly as long as the main container's length is.

My left container and my main container all sit in one container - innerContainer.

It does not seem to be working at all.

Would appeciate any help.

Thanks,
Leigh

My styles are:

#innerContainer {
width: 760px;
float:left;

}

#leftContainer {
width: 230px;
background-image:url(images/leftBackRepeat.jpg);
background-repeat:repeat-y;
float:left;
}

.leftTile {
background-image:url(images/leftBack.jpg);
background-repeat:no-repeat;
margin-top:0px;

}

#mainContainer {
width:528px;
float:left;
}

MY HTML:

<div id="innerContainer">

<div id="leftContainer">
<div class="leftTile">

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
</div>

<div id="mainContainer">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
</div>

Centauri

08-13-2008, 06:07 AM

If you want the repeated graphic to be as long as the #mainContainer (or #leftContainer, whichever is the longest), then the image should be a background to #innerContainer.

leighchic

08-13-2008, 06:34 AM

yes, thats it! thank you.... That worked great for my design.