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: http://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;}

Well keeping it simple to repeat a background image vertically, try something like

 

 

background-image : url(../images/bg.gif);

background-repeat : repeat-y;

 

you have actually specified no repeat in your html code as below

 

background:#000 url() -18px 0 no-repeat;

 

oh and i usually add the background to the body and not the html that may be the issue.

 

good luck

 

Hey there, unfortunately still having the same problem. I altered the CSS to repeat in both the html and content portions. But it doesn't seem to be working. Basically, on the pages with very little content, that's where the problems arise. On the longer pages, there's no issue because it takes up enough space length-wise. But on the shorter pages, the bg.gif image cuts off before the footer, leaving varying lengths of black space. Any thoughts as to why this is happening?

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;}

Get rid of overflow:auto; for starters.

 

Your code seems a little bloated, I can't see hat all the z-index's are there for. Also try getting rid of display:block; on your content area.

Never mind...everything's working now so consider this thread closed. Thanks for your time!