Question

http://www.casleague.com
^ you can view the complete source there

How come the the image http://casleague.com/images/content/bg.gif does not repeat -y like I coded it?

CSS

.main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

     .content { padding: 20px; height:100%; }      
         .leftside { width: 600px; float: left; }
         .rightside { width: 300px; float: right; }

HTML

<div class="main">
   <div class="content">
      <div class="leftside">
         123
         12
         312
         3123
         123
         123
      </div>
      <div class="rightside">
         123
         123
         123
         123
         123
      </div>
   </div>
</div>

Answer 1

Believe it or not, your background is repeating. However, your <div class="main"> is only 40 pixels high. This is what it looks like when you click on the element in Firebug:

Notice how small the highlighted area is. And the clientHeight in the DOM window at the bottom right reads "40".

The issue is that by default most containers won’t expand to the size of their contents if the contents are only floats. I’ve had issues with this before. Add overflow: auto; to the style block for .main, and it should work. If not, add a <br clear="all" /> after the closing tag for <div class="rightside">.