Can someone tell me why my bg image is not tiling??

I hope my code isn't too much of a mess I have been adding a bunch of things trying to get my bg image to tile in the left column (#leftcol).

Can someone help me out...and feel free to point out any garbage that ended up there while I was adding/changing things in frustration.

Here is what I have:

html, body{ 
 margin:0; 
margin-top:10px;
 padding:0; 
 text-align:center; 
background-image : url(images/bg.gif);
} 
 
 #wrapper{ 
  height: 100%;
  overflow:hidden;
} 
 
 
#pagewidth{ 
 width:792px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
 overflow:hidden;
} 
 
#header{
 position:relative; 
 height:128px; 
  background-color:#60CC56; 
 width:100%;
background-image : url(images/top.gif);
} 
 
#leftcol{
	width:246px;
	float:left;
	position:relative;
	background-color:#767070;
	background-image : url(images/leftbg.gif);
	background-repeat: repeat;
	min-height: 500px;
	height: 100%;
	
}
 
#maincol{
	background-color: #FFFFFF;
	float: right;
	display:inline;
	position: relative;
	width:546px;
	background-image : url(images/right.gif);
 clear:both;
}
 
#footer{
 height:72px; 
  background-color:#B37070; 
 clear:both;
background-image : url(images/bottom.gif);
 } 

#bottom{
 height:20px; 
  clear:both;
font-size: 12px;
   color: black;
   font-family: Verdana, Helvetica, Arial, sans-serif;
 } 


.col {

min-height: 500px;
height: auto;
height: 100%;

}
 

 
 /* *** Float containers fix:
  *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

Code (markup):

Thanks!

 

Could you please post your HTML code too? I don't see anything wrong so far, but I need a little more context.

 

Based on your CSS, you probably think that the leftcol will expand to the parent element's height with your 100% declaration, and it wont. You need to set the background image on the container of leftcol, and make the image repeat-y (faux columns).

 

well, you're declaring a property on html you shouldn't (background), the height:100% on #wrapper should be treated as height:auto because you have no height declared on HTML or Body, you have overflow set with a height which should be chopping off your content, and you have that bloated clearfix nonsense when you seem to have overflow:hidden applied meaning you shouldn't need to clear your DIV's - AND a width so haslayout is tripped too meaning you don't need clearfix in IE either.... and I don't even want to know what .col is supposed to accomplish.

Though as KatieK said, we could probably tell you more if we could see the HTML itself. CSS without seeing where/how it's applied it pretty much meaningless gibberish.

 

LOL you guys are both right..thanks! I wasn't fully understanding faux columns and tried to apply that to the .leftcol. Adding it to the wrapper div did the trick.

Now I just need to get rid of that extra stuff I was trying that deathshadow listed.

repped and repped

 

Now that I have that working I am getting an issue in IE. The footer isn't staying below the content. Any ideas?

Thanks!

 

Hows about a link

And, you can always try kicking the footer out of the container, but you'll probably need to re-specify dimensions and re-center IF your container had dimensions and was centered.

 

nevermind...got it. Had to change since added content divs to relative from absolute.