Hi again gurus,
I am helping a friend to launch her blog and she's asked that the sidebar background extend the full length down the page. So as the page grows (or shrinks), the size of the sidebar will increase.
Here's the site: [[LINK href="http://theselittlewaves.com"]]http://theselittlewaves.com[[/LINK]]
I've tried making the height of #sidebar 100% and that didn't seem to work. Then I googled and read an article that said I need to make the container 100% as well, so I made #inner height 100% but that didn't work.
I tried cheating by making the height in pixels (like 4000px), but that doesn't work for different size pages.
Here's a quick screencast video of how it should look (and what I tried) [[LINK href="http://screencast.com/t/NiYBsE6m"]]http://screencast.com/t/NiYBsE6m[[/LINK]]
Michael Fields answers:
This is how I've always done it:
Rodney Blackwell comments:
I came across the ALA article in my Googling, but I wasn't sure if there was another way to do it.
I also wasn't sure how wide I needed to make the image.
create a background image of height 2 or 4 px with the color distribution that you want the bg to be like and make it repeat-y only. Check it and let me know
If you want me to do it myself do let me know!
another way is to make a table and two td (left and right one) with widths defined, then give bg to the right td, lemme know if you want me to do this one for you too
Cosmin Popovici answers:
You can also use [[LINK href="http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/"]]jQuery Equal Heights[[/LINK]]
However, I wouldn't recommend jQuery for such a simple task. So, save [[LINK href="http://dl.dropbox.com/u/5196984/bg.jpg"]]this image[[/LINK]], save it to your images folder and add this to your style.css file on line 625:
background: url("http://dl.dropbox.com/u/5196984/bg.jpg") repeat-y 0 0;