Take the 2-minute tour ×

Maybe this is not the right stack to ask this question, let me know please if I have to change it.

Basically I'm having a problem with a css background that doesn't take the hole height of the page, and since I have a background image repeating, it doesn't look good at all.

The code structure is something of this kind:

  <div class="bg">
     <div class="wrap">
        <wordpress loop>

The background is out the wrapper cause the image is bigger and is mean to cover the 100% width of the page.


  .bg { 
       width: 100%;
       background: url(imagelink) repeat-y center;
       height:???? I SET 500px for display the sample of the issue.
  .wrap {
       width: 960px;
       margin: 0px auto;

The main line is that the article can be different size, in this sample http://www.villa-frankrijk-provence.nl/de-provence/de-provence-1/ would be something like 3300px, however in other pages it's something like 500px, so I cannot use a fixed number.

I would like the background image to get the hole height, any suggest???? I will really appreciate your help as always :)!


share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

Remove the height declaration on .bg and add this after #page-text-single (i.e. after <wordpress-loop>) in your HTML:


Floating items won't cause their parent elements to resize, but you can force them to do so using a non-floated element directly after the floating content.

share|improve this answer
WOW tigger you are my idol! It worked perfect! Thanks a lot! –  andresmijares25 Nov 4 '11 at 22:33
add comment

Dont specify a height or try height 100%.

share|improve this answer
I've already tried those options, It doesn't display nothing at all in both cases –  andresmijares25 Nov 4 '11 at 22:27
add comment

Not sure this is what you want:

share|improve this answer
add comment

Your Answer


