Background image not repeating vertically

[jaidanwolf]

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

[jeffman]

There are many background images on that page. Which one is the problem?

[jaidanwolf]

Sorry, it's the main content background, bg.gif

[jeffman]

FWIW, you have an extra semicolon near the end of the #content definition that is toasting the background color. I doubt it has other effects, but who knows.The likely suspect here is the height declaration of 100%. That means one-hundred percent the height of the window. If your document gets bigger than that, there will be empty space on the bottom.I see Ingolme lurking. Same thing?

[JC5]

Ok your problem is with Repeat-y. That is for horizontal. Try repeat-x and it should work. Tell me if it works

[jaidanwolf]

Hi, thanks for the suggestions! It's actually working now...the background image is extending properly. However, a new issue has arisen from this change - on the longer pages (with more content), there's now a vertical scrollbar in the content area itself. I would really like to get rid of that and have it go back to using only the main browser scrollbars as it did before. Any suggestions? New code is below:

/* 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-y; #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;}

[JC5]

I would hazard a guess at the overflow:auto;It creates scrollbars when the content overflows out of the container.A possible solution would be to remove it or to make the height with 100%Tell me if it works

[jaidanwolf]

Just tried removing the overflow part and the content area scrollbars disappeared, but then the background image cuts off again in even weirder places. So unfortunately that's not going to work :*(

[JC5]

Hmm, try just putting overflow on the parts where you need it instead of having it almost globally.

[jaidanwolf]

Not quite sure where else I'd put it. It's sort of a catch-22 at the moment because if I remove the overflow portion, the background image seems to cut off at a set point (not even defined by the text this time). If I leave it in there, those ugly extra scrollbars appear. Not quite sure what to do to get around that...

[Ingolme]

I think that if you give the body the auto overflow and remove it from #content it will work without cutting the background image. I'm not entirely sure though.

[jaidanwolf]

Hi, I just tried that and it did cut off the image as well as put those obnoxious scrollbars on the far right side of the screen right next to the main browser ones. It's very strange...

[Ingolme]

I've got a different approach: how about applying the background image to the html element instead?

[jaidanwolf]

Ah yes, I actually did try that at one point and all it did was add a strange side square of the image to the black space next to the content area, about halfway down the page. Very frustrating!

[Ingolme]

Hmm, that sounds strange. If you repeat the background vertically in the HTML element it should theorically continue down to the bottom of the page, even further down than the window. I'm not sure what else can be done.By removing "height: 100%" from the body you would solve the problem, but most likely anything inside it wouldn't be able to have 100% height after.

[jaidanwolf]

Just tried again and it seems that putting the background image in the html section just makes it disappear altogether, leaving a solid black background (I removed the height from the body section as well).

[Ingolme]

That's most likely because your BODY element has a black background color. Try removing the background color from your body element.

[jaidanwolf]

Arrgh...still no luck. That resulted in the background image appearing halfway down the page (for pages with more content...for the shorter pages, it was still just solid black), with extra squares of black and white jutting out horizontally past the content area. No joy, really don't understand what's causing this :*(

[Ingolme]

The real base of the problem is that you're limiting the background to only 100% height (the size of the window) but the overflowing content is taking more than 100%, so if you scroll down the background image won't be there.If you contain all the text within the content box with overflow: auto you'll get an extra scrollbar, if you don't do that, the background won't go down far enough. The problem is simple to understand, but hard to fix.

[jaidanwolf]

Thanks...I definitely understand the problem now. I really appreciate your help. No suggestions on getting around it though?

[jaidanwolf]

As it happens, never mind...all the problems have been fixed :*)