logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

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

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: http://theselittlewaves.com


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) http://screencast.com/t/NiYBsE6m

Any suggestions?

This question has been answered.

Rodney Blackwell | 02/21/11 at 3:09pm Edit

Previous versions of this question: 02/21/11 at 3:11pm | 02/21/11 at 3:11pm | 02/21/11 at 3:12pm | 02/21/11 at 3:12pm

The experts have suggested, on average, a prize of $10 for this question.

(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    02/21/11
    3:26pm
    Michael Fields says:

    This is how I've always done it:

    http://www.alistapart.com/articles/fauxcolumns/

    Previous versions of this answer: 02/21/11 at 3:13pm

    • 02/21/11 3:19pm

      Rodney Blackwell says:

      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.

  • avatar
    Last edited:
    02/21/11
    3:14pm
    nabeel says:

    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!

    • 02/21/11 3:17pm

      nabeel says:

      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

  • avatar
    Last edited:
    02/21/11
    3:26pm
    Sébastien | French WordpressDesigner says:

    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

    attachment image View Attachment

  • avatar
    Last edited:
    02/21/11
    3:27pm
    Cosmin Popovici says:

    You can also use jQuery Equal Heights

    However, I wouldn't recommend jQuery for such a simple task. So, save this image, 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;

    Previous versions of this answer: 02/21/11 at 3:26pm | 02/21/11 at 3:27pm

This question has expired.





Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.