Footer Overlapping Home-Box & Box Transparencies in HTML - html

Question

I've set up some features boxes on my home page, however the background image .../images/darker.png is only showing on the left of the image, leaving the remains of the box transparent.
Here is my CSS code for my Home-Boxes:
/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
float: left; display: inline; width: 314px;
background-image: url(images/darker.png);
margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
display: block; height: 0; font-size: 0; line-height: 0;
text-indent: -4000px; clear: both;
}
Here is my HTML for the home boxes..
<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Powerful Hardware</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Server Mod Support</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Specialized Support</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Migration Assistance</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Hardware Specs</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- end home boxes -->
As you can see the home-boxes are overlapping the footer. The footer should have about a 1 centimeter space above it so nothing overlaps it. Also, the background image for the footer is showing 2 colors but the background of the footer is only supposed to be 1 color.
Here is the image script, please refer to previous code for the image style.
bg-image="/images/darker.png".
I would appreciate any help I could get here.
For further information on this problem, here is a link to my site: http://cudahost.com/new

Answer 1

For the home boxes, you need to set the background to repeat:
.box {
background-repeat: repeat;
background-position: 0 0;
}
In fact, if I understand your problem correctly, the style on the inner div needs changing too. Currently you prevent the background repeating using no-repeat, instead:
.box .box-b {
background-repeat: repeat;
background-position: 0 bottom;
}