How to make the sidebar background extend 100% down the page? WordPress

• SOLVED

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]]

Any suggestions?

Answers (4)

2011-02-21

Michael Fields answers:

This is how I've always done it:

[[LINK href="http://www.alistapart.com/articles/fauxcolumns/"]]http://www.alistapart.com/articles/fauxcolumns/[[/LINK]]

---

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.

2011-02-21

Sébastien | French WordpressDesigner answers:

in your css #wrap {background:url(mon-image.jpg) 0 0 repeat-y;}
replace "mon-image.jpg" by the url of your image
your image is the image in attachment

---

Rodney Blackwell comments:

Thank you!

2011-02-21

nabeel answers:

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!

---

nabeel comments:

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

2011-02-21

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;