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.

Background image not repeating vertically

Discussion in 'CSS' started by jaidanwolf, Jul 23, 2008.

  1. #1
    Hey guys, last tech problem I seem to have with my site - everything else is checking out but this one issue is still giving me real trouble.

    On my laptop, the background image looks fine and extends all the way down to the bottom of the page, however long that page is. However, on a friend's computer (he has a higher screen resolution), the background image is cutting off and not going all the way down to the bottom.

    I'm working with a 1280 x 800 res. My site is optimized for 1024 x 768 res. On both my screen and when testing the latter resolution, everything's great. But on larger screens, it seems to cut off and not repeat vertically, no matter what I do. I've tried the standard "repeat-y" settings and a lot of other stuff, and nothing seems to make it take up the full length of the page on my friend's screen. Any suggestions?

    Site: www.tigersjunkyard.com/xilon/main.shtml

    CSS Code

    /* BASIC INFO */
    
    html {
    height:100%; 
    max-height:100%;  
    padding:0; 
    margin:0; 
    border:0; 
    font-size:76%; 
    font-family: Georgia;
    background:#000 url() -18px 0 no-repeat; 
    
    /* \*/ 
    
    /* */ }
    
    
    
    /* GENERAL LAYOUT */
    
    div#wrapper{
     width: 1006px; height: auto;
    }
    
    body {height:100%; max-height:100%; padding:0; margin:0;  border:0;}
    #content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:160px; padding-top: 100px; position:relative; z-index:3; color: #ffffff; background: url(images/bg.gif); #000000;}
    #head {position:fixed; margin:0; padding-left: 134px; display:block; width: 872px; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;}
    #foot {position:fixed; margin:0; padding-left: 150px; bottom:0px; display:block; width:856px; height:50px; background:url(images/footer.gif) #000000; color:#000000; text-align:center; font-size:10pt; z-index:4; font-family: verdana;}
    
    
    
    /* TITLES */
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #CBA61A;
    }
    
    h1 {
    	letter-spacing: -2px;
    	font-size: 3em;
    }
    
    
    h2 {
    	letter-spacing: -1px;
    	font-size: 2em;
    	color: #ffff66;
    	font-style: italic;
    }
    
    h3 {
    	font-size: 14pt;
    	font-style: italic;
    	text-decoration: underline;
    	color: #ffffff;
    	font-family: verdana;}
    }
    
    p, ul, ol {
    	line-height: 150%;
    }
    
    .title {
    	margin: 0;
    	border-bottom: 2px solid #0F0F0F;
    }
    
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    	font-size: 13px;
    	color: #ffffff;
    }
    
    body, th, td, input, textarea, select, option {
    	font-family: Georgia;
    }
    
    p.faq {color: #3AA0B9;}
    
    
    
    /* LINKS WITHIN BODY */
    
    a {text-decoration: none; color: #3AA0B9;}
    a:visited {text-decoration: none; color: #3AA0B9;}
    a:active {text-decoration: none; color: #3AA0B9;}
    a:hover {text-decoration: overline underline; color: #660000;}
    
      p.link a:hover {background-color: #2B2E21;color:#fff;}
      p.link a:link span{display: none;}
      p.link a:visited span{display: none;}
      p.link a:hover span {
      position: absolute;
      margin:15px 0px 0px 20px;
      background-color: #ffffff;
      max-width:300px;
      padding: 2px 10px 2px 10px;
      border: 5px solid #660000;
      font: normal 16px verdana;
      color: #000000;
      text-align:left;
      display: block;}
    
    
    
    /* POSITION */
    
    #left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 100px; font-size:1em; color:#fff; z-index:4;}
    
    * html #head, * html #foot,* html #left {position:absolute;}
    
    #content p {padding:5px;}
    
    p.leftmargin {margin-left: 1cm}
    
    .meta {
    	text-align: right;
    	color: #646464;
    }
    
    img.floatLeft { 
        float: left; 
        margin: 4px; 
    }
    img.floatRight { 
        float: right; 
        margin: 4px; 
    }
    
    
    
    /* SIDE MENU */
    
    #menu {list-style-type:none; padding: 0px; padding-top: 100px; margin:0; width:150px; z-index:100; float:right; height:360px; background:url(images/stars.gif) #000000;}
    #menu ul {list-style-type:none; padding:0; margin:0;}
    #menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;}
    
    #menu li.sub {background: #000000 url(slide/slide_0.gif) no-repeat;}
    
    #menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
    
    #menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
    
    #menu ul,
    #menu :hover ul ul,
    #menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
    
    #menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
    
    #menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
    
    #menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;}
    #menu :hover ul :hover ul, 
    #menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #660000;}
    
    #menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; }
    #menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
    #menu :hover ul :hover {background:#660000; position:relative; z-index:100;}
    #menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    #menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    
    #menu :hover ul :hover ul li, 
    #menu :hover ul :hover ul li a
    {background:#000000;}
    #menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;}
    
    #menu :hover ul :hover ul li.fly a {background: #000000  url(slide/arrow.gif) no-repeat 120px center;}
    #menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;}
    #menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    #menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    
    #menu :hover ul :hover ul :hover ul li, 
    #menu :hover ul :hover ul :hover ul li a {background:#000000;}
    
    #menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;}
    #menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
    
    Code (markup):
     
    jaidanwolf, Jul 23, 2008 IP
  2. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you set in the html portion of your css to not repeat backgrounds, so in the CONTENT ID, add this to your background tag: repeat-y
     
    yankzilla, Jul 23, 2008 IP
  3. jaidanwolf

    jaidanwolf Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmm yeah, that's the thing. I did add in the repeat-y at one point and it still didn't work. I even just changed the html section to " background:#000 url() -18px 0 repeat-y; " AND altered the content section to repeat-y but on larger resolutions it still isn't working. The cloud image in the content area (bg.gif) just cuts off at different points, leaving black space between the bottom of the image and the footer. It works fine with the longer pages, but shorter pages with less content result in this problem.
     
    jaidanwolf, Jul 23, 2008 IP
  4. jaidanwolf

    jaidanwolf Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Okay...I've fixed the settings so that now the background image (bg.gif) extends the full length of the page regardless of individual page content and screen res. However, unfortunately, now these extra vertical scrollbars have appeared within the content area, which I can't have. Any suggestions on how to get rid of them without having the bg image cut off again?

    Revised Code:

    /* BASIC INFO */
    
    html {
    height:100%; 
    padding:0; 
    margin:0; 
    border:0; 
    font-size:76%; 
    font-family: Georgia;
    background:#000;}
    
    /* \*/ 
    
    /* */ }
    
    
    
    /* GENERAL LAYOUT */
    
    div#wrapper{
     width: 1006px; height: 100%; }
    
    body {height:100%; padding:0; margin:0;  border:0;}
    #content {display:block; height:100%; overflow:auto; padding-left:160px; padding-top: 100px; position:relative; z-index:3; 
    
    color: #ffffff; background-image: url('images/bg.gif'); background-repeat: repeat; #000000;}
    #head {position:fixed; margin:0; padding-left: 134px; display:block; width: 872px; height:100px; 
    
    background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;}
    #foot {position:fixed; margin:0; padding-left: 150px; bottom:0px; display:block; width:856px; height:50px; 
    
    background:url(images/footer.gif) #000000; color:#000000; text-align:center; font-size:10pt; z-index:4; font-family: 
    
    verdana;}
    
    
    
    /* TITLES */
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #CBA61A;
    }
    
    h1 {
    	letter-spacing: -2px;
    	font-size: 3em;
    }
    
    
    h2 {
    	letter-spacing: -1px;
    	font-size: 2em;
    	color: #ffff66;
    	font-style: italic;
    }
    
    h3 {
    	font-size: 14pt;
    	font-style: italic;
    	text-decoration: underline;
    	color: #ffffff;
    	font-family: verdana;}
    }
    
    p, ul, ol {
    	line-height: 150%;
    }
    
    .title {
    	margin: 0;
    	border-bottom: 2px solid #0F0F0F;
    }
    
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    	font-size: 13px;
    	color: #ffffff;
    }
    
    body, th, td, input, textarea, select, option {
    	font-family: Georgia;
    }
    
    p.faq {color: #3AA0B9;}
    
    
    
    /* LINKS WITHIN BODY */
    
    a {text-decoration: none; color: #3AA0B9;}
    a:visited {text-decoration: none; color: #3AA0B9;}
    a:active {text-decoration: none; color: #3AA0B9;}
    a:hover {text-decoration: overline underline; color: #660000;}
    
      p.link a:hover {background-color: #2B2E21;color:#fff;}
      p.link a:link span{display: none;}
      p.link a:visited span{display: none;}
      p.link a:hover span {
      position: absolute;
      margin:15px 0px 0px 20px;
      background-color: #ffffff;
      max-width:300px;
      padding: 2px 10px 2px 10px;
      border: 5px solid #660000;
      font: normal 16px verdana;
      color: #000000;
      text-align:left;
      display: block;}
    
    
    
    /* POSITION */
    
    #left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 
    
    100px; font-size:1em; color:#fff; z-index:4;}
    
    * html #head, * html #foot,* html #left {position:absolute;}
    
    #content p {padding:5px;}
    
    p.leftmargin {margin-left: 1cm}
    
    .meta {
    	text-align: right;
    	color: #646464;
    }
    
    img.floatLeft { 
        float: left; 
        margin: 4px; 
    }
    img.floatRight { 
        float: right; 
        margin: 4px; 
    }
    
    
    
    /* SIDE MENU */
    
    #menu {list-style-type:none; padding: 0px; padding-top: 100px; margin:0; width:150px; z-index:100; float:right; 
    
    height:360px; background:url(images/stars.gif) #000000;}
    #menu ul {list-style-type:none; padding:0; margin:0;}
    #menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;}
    
    #menu li.sub {background: #000000 url(slide/slide_0.gif) no-repeat;}
    
    #menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; 
    
    text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
    
    #menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
    
    #menu ul,
    #menu :hover ul ul,
    #menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
    
    #menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
    
    #menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
    
    #menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;}
    #menu :hover ul :hover ul, 
    #menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px 
    
    solid #660000;}
    
    #menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; }
    #menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
    #menu :hover ul :hover {background:#660000; position:relative; z-index:100;}
    #menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    #menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    
    #menu :hover ul :hover ul li, 
    #menu :hover ul :hover ul li a
    {background:#000000;}
    #menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;}
    
    #menu :hover ul :hover ul li.fly a {background: #000000  url(slide/arrow.gif) no-repeat 120px center;}
    #menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;}
    #menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    #menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
    
    #menu :hover ul :hover ul :hover ul li, 
    #menu :hover ul :hover ul :hover ul li a {background:#000000;}
    
    #menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;}
    #menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
    
    Code (markup):
     
    jaidanwolf, Jul 23, 2008 IP
  5. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Can you post the site? It would be much easier to see what's wrong.

    Try removing overflow:auto from the content.
     
    glorie, Jul 23, 2008 IP
  6. jaidanwolf

    jaidanwolf Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hi...the link to the site is already in my initial post. Pages like the main page and "new additions" are the best ones to look at in regards to the background image cutting off. Longer pages like the FAQ section are ideal to view for the internal scrollbar issue.

    I can't seem to remove the overflow bit without the background image cutting off again.
     
    jaidanwolf, Jul 23, 2008 IP
  7. Masim man

    Masim man Active Member

    Messages:
    73
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    58
    #7
    Yes, to fix it on IE is by removing overflow:auto.
    It appears because you set the height in your content.

    #content {
    display:block;
    height:100%;
    overflow:auto;
    padding-left:160px;
    padding-top: 100px;
    position:relative;
    z-index:3;
    color: #ffffff;
    background-image: url('images/bg.gif');
    background-repeat: repeat-y; #000000;}

    Change it to this:

    #content {
    display:block;
    height:100%;
    padding-left:160px;
    padding-top: 100px;
    position:relative;
    z-index:3;
    color: #fff;
    background:#000 url(images/bg.gif) top repeat-y;}
     
    Masim man, Jul 23, 2008 IP
  8. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I'm working with a 1280 x 800 res. My site is optimized for 1024 x 768 res.


    I think you should work with a 1024*768 res. I encounter this problems , I let it be, because most of the user could enjoy my site.
     
    justinlorder, Jul 24, 2008 IP
  9. jaidanwolf

    jaidanwolf Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Never mind, got everything worked out now...problem finally solved. Thanks for your time!
     
    jaidanwolf, Jul 24, 2008 IP