Question

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>
     </div>
  </div>

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

CSS:

  .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 :)!

Regards

Answer 1

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

<div style="clear:both;"></div>

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.