100% Container Height

I have a problem with getting my page to expand to 100%. Seems like there is a lot of situations like this and I have tried everything I can find but there must be something eluding me somewhere. Also if you look at in Firefox you will see a funky border issue. Chrome shows it how it is supposed to be. So if you know right off what that problem is I'd sure appreciate that info too! Thanks.

www.countrysidecabinetshop.net/officegallery.html

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background: #3333;
background-image: url(../images/Woodshavings.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
text-align: center;
height: 100%;
width: 100%;
}
ul, ol, dl {
padding: 0;
margin: 0;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
color: #FFF;
text-align: center;
font-size: 16px;
}
a img {

}
.item a img {
float: left;
padding: 3px;
background-color: #000;
margin: 5px;
border: 1px solid #cccccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
text-shadow: 3px 3px #FFF;
}

.item a:hover img, .item a:active img {
padding:3px;
border:1px solid #cccccc;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
}
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
a:hover, a:active, a:focus {
text-decoration: underline;
color: #FFFFFF;
background-color: #000;
font-size: 16px;
float: none;
position: static;
list-style-type: none;
opacity: 20%;
}
.container {
width: 960px;
position: relative;
min-height: 100%!important;
background: #000;
margin: 0 auto;
outline-width: medium;
outline-style: ridge;
box-shadow: 0px 0px 15px 15px;
height: auto;
outline-color: #FFF;
margin-bottom: -50px;
bottom: auto;
}
.header {
background-color: #000;
}

.sidebar1 {
float: left;
width: 200px;
padding-bottom: 8px;
background-color: #000;
padding-left: 1px;
padding-right: 18px;
height: auto;
font-size: 16px;
min-height: 100%;
}
.content {
padding: 10px;
width: 721px;
float: right;
background-color: #000;
height: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
padding-bottom: 3px;
padding-top: 3px;
}
ul.nav li {
border-bottom: 1px solid #000;
padding-top: 8px;
padding-bottom: 8px;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #660000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #FFF;
background-color: #000000;
}
.footer {
padding: 10px 0;
background: #000;
position: relative;
clear: both;
color: #FFF;
visibility: visible;
border-top-color: #919191;
border-top-width: medium;
border-top-style: ridge;
height: 50px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

 

background-image: url(../images/Woodshavings.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

 

Your thinking is flawed from the start -- that massive background image isn't viable if you're gonna have fluid design or a large page; there's a reason you don't see that sort of thing on REAL websites, and instead only see them on goofy little personal pages or small business' who got taken for a ride.

Really though that page is filled with problems -- from the presentational images in the markup, to the non-semantic markup, to static scripting inlined in the markup, to outdated garbage like "spry" basically using scripting to do CSS' job.

AlbCoder's idea of using background-size:cover (and the browser specific versions) is a decent solution -- with your image I'd probably add a gradient fade to each side of the image and align it "bottom center" since "center center" is gonna look like arse on older browsers that don't support background-size -- since the image has a 'harsh' bottom edge.

Really though I'd axe that image as not being viable for web deployment.

 

I was able to downsize the background image now that it stretches to fit the browser window. I think we will keep it for now as it helps to give our page the "feel" we want. If you would care to point out some of the problems stated in paragraph 2 a little more explicitly I would be happy to change it. I began this page with a template on dreamweaver and as I learn more I am changing it and trying to correct the code in code view as it is my desire to eventually get to all hand coding. That is a road that takes a bit of time to travel tho.


Albcoder: thanks for your help. That was a great option for my background image although it did not fix the problem with my "container" div. I cannot seem to get it to have a minimum height of 100% to reach to the bottom of the browser. If you see on pages like /officegallery.html or /storagegallery.html etc. you can see the problem. I am working on it live and trying different positioning options but I dont really know what I am doing. Just trying things and seeing what it does.