Repeat background no way to auto size

Theodore A. Jencks

Hi all,

I posted a question about a side navigation bar earlier where I was
encountering this problem. I thought I'd repost the question in a more
general format because I'm not sure people quite understood what I was
asking in my last post. Here is what I'd like to do:

1. Have a div tag that's soul purpose is to display a repeating background
image in the y-axis.
2. The div tag should also have a fixed width.
3. The div tag should start from a specific point from the top of the
browser window.
4. The div tag should streach all the way to the bottom of the page no
matter how the user resizes the window.

Here is the style sheet code that I've come up with so far:

div#side_navigation_2 {
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 368px;
right: auto;
bottom: 0px;
width: 224px;
height: auto;
background-image: url(../imgs/framework/side_nav/side_nav_background.jpg);
background-repeat: repeat-y;
}

The problem is that if you have height set to auto browsers won't display
the div unless it has some sort of content. I thought about just putting a
  in the div but this simply leads the browser to set the height equal
to one line of text. I can't seem to find a way to automatically calculate
the height of the window and have the div ajust accordingly.

Also it would seem to me that if you define left, top and bottom you would
end up with what I want. A repeating background that starts at X number of
pixels from the top, X number of pixels from the left (in my case 0px) and
0px from the bottom. Plus a fixed width but this just doesn't seem to work
as without defining a height the browser won't display the background image.

I hope that someone else out there has had this issue with style sheets and
has come up with a solution.

Regards,
Theo

Jul 20 '05 #1

Brian

Theodore A. Jencks wrote:

1. Have a div tag that's soul purpose
That's kinda funky. (SCNR)
is to display a repeating background
image in the y-axis.
2. The div tag should also have a fixed width.
3. The div tag should start from a specific point from the top of the
browser window.
4. The div tag should streach all the way to the bottom of the page no
matter how the user resizes the window.
Why do you need the extra div element? Can you attach the bg image to
the body?
div#side_navigation_2 {
position: absolute;
left: 0px;
top: 368px;
bottom: 0px;
width: 224px;
height: auto;

Try height: 100%;
Note that you may need to set height: 100% for body, too, to get this to
work in certain browsers.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #2