DIV Background Image

[siamino]

Hi,

I have a 3 column layout; leftpanel, content, rightpanel.
The rightpanel houses the site navigation. The leftpanel is empty.

I want to apply a vertical tiled background image to the leftpanel DIV so that is scales vertically with the other two columns. Can this be done, or will the tiled background only work if the DIV contains something?

CSS is:

#leftpanel {
background-image: url(images/tile.png) repeat-y left top;
float: left;
margin-left: 5px;
width: 95px;
}

html is:

<div id="leftpanel">

<!--img src="images/tile.png" alt="" width="95" height="14" /-->

</div>
*Note, I can get this working by including the commented out image element above, but it doesn't tile automatically to the footer of my page, which is what I'm after.*

[osgood07]

You would need to surround your three existing <divs> in a wrapper <div> (see html code below) and put the tiling background image in that as a background-image, to run behind the leftpanel <div> (see css below).

#wrapper {
background-image: url(images/tile.png);
background-repeat: repeat-y;
}


<div id="wrapper">
<div id="leftpanel">Left Panel</div>
<div id="content">Content</div>
<div id="rightpanel">Right Panel</div>
<br style="clear: both;">
</div><!-- end wrapper -->

[siamino]

Hey, thanks for the reply.

They do actually all sit in a wrapper div, which is centered on the page. Problem is, that the rightpanel has a graphic at the top of the page so it'd be awkward to create a single image representing the horizontal colours of all three DIVs.

So am I right in assuming that the background-image rule can only really be applied to the body element? I mean, I can't uniquely assign multiple images individual DIVs?

[osgood07]

Hey, thanks for the reply.

They do actually all sit in a wrapper div, which is centered on the page. Problem is, that the rightpanel has a graphic at the top of the page so it'd be awkward to create a single image representing the horizontal colours of all three DIVs.

Probably need to supply a visual so we can see waht it is you are trying to do.

So am I right in assuming that the background-image rule can only really be applied to the body element? I mean, I can't uniquely assign multiple images individual DIVs?

Nope. You can apply a background image to anything you like - <div> <td> <p> <a> etc, you name it, it supports a background image.

You are correct in thinking you CANNOT apply multiple images to a single container as background images.

[siamino]

Cool! I'm glad that you can place an individual image as a background in each separate DIV - that's what I thought all along.

Here's a URL to a very basic page of what I want to do. http://www.glimmerrecords.co.uk/index.html

The Home page shows a small blue rectangle in the top left corner - which is the leftpanel DIV. I want this to extend down & match the lenght of the rightpanel - which is the red/pink Navigation column .

The actual images aren't uploaded onto the server, but I've added colour to the leftpanel DIV to illustrate how I want it to look. If you click on the 2nd link - Image Left Column it extends down as I want, well almost! I had to specify a height for the image in the <img> tag of the page.

So, any clues on what I can do to get the image tiled down in the correct manor would be gratefully appreciated.
Cheers,
Si