1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by MattL, Dec 16, 2007.

  1. #1
    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.
    SEMrush
    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!
     
    MattL, Dec 16, 2007 IP
    SEMrush
  2. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Could you please post your HTML code too? I don't see anything wrong so far, but I need a little more context. :)
     
    KatieK, Dec 16, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #3
    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).
     
    soulscratch, Dec 16, 2007 IP
    MattL likes this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,512
    Likes Received:
    1,929
    Best Answers:
    247
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Dec 16, 2007 IP
    MattL likes this.
  5. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #5
    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
     
    MattL, Dec 17, 2007 IP
  6. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #6
    Now that I have that working I am getting an issue in IE. The footer isn't staying below the content. Any ideas?

    Thanks!
     
    MattL, Dec 17, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #7
    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.
     
    soulscratch, Dec 17, 2007 IP
  8. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #8
    nevermind...got it. Had to change since added content divs to relative from absolute.
     
    MattL, Dec 17, 2007 IP